Question

<!DOCTYPE html>
<html>
    <head>
        <style>
            .dropdown-content a{
                display: block;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="dropdown-content">
            <a>1</a>
            <a>2</a>
        </div>
        <script>
            window.onclick = function(event){
                if(!event.target.matches('.dropdown-content')){
                    alert("foo");
                }   
            };
        </script>
    </body>
</html>

我正在尝试仅在我们没有点击正文中alert(foo);标记内的任何内容时执行div。不幸的是，无论我点击哪里，它都会执行。为什么呢？

Answer 1

window.onclick = function(event){
 if (document.getElementsByClassName('dropdown-content')[0].contains(event.target)){
    // inside
  } else{
    // outside
    alert('foo');
  }
};

.dropdown-content a{
    display: block;
    background-color: blue;
}

<div class="dropdown-content">
  <a>1</a>
  <a>2</a>
</div>

获取您的元素并使用contains检查点击是在内还是外。如果在外面然后警告。

matches无效，因为您点击的a代码中没有.dropdown-content代码。所以每次价值都是假的。它alert('foo')

Answer 2

正如我所见，您必须向de div.conta添加内容，我制作了demo 并使用dom，className（imade右，但可以使用任何）：

<div class="dropdown-content">
abc
            <a class="name">1</a>
            <a>2</a>
        </div>

window.onclick = function(event){
console.log(event.target.className);


                if(event.target.className!=='dropdown-content'){
                    console.log("foo");
                }   
            };

Answer 3

如果你正在使用jQuery，你可以执行以下操作：

$(event.target).closest('.dropdown-content').length

请参阅以下JSFiddle： https://jsfiddle.net/4nb691a0/

Answer 4

因为你的if语句返回false并且！运算符返回true。这是因为当您在div中单击时，您的实际目标是<a>元素，其中没有类.dropdown-content。

在div外部点击时，它也没有类.dropdown-content。所以你的语句总是返回false但是！运算符变为true。

试试这个：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <style>
            .dropdown-content a{
                display: block;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="dropdown-content">
            <a class="link">1</a>
            <a class="link">2</a>
        </div>
        <script>
            window.onclick = function(event){
                if(!event.target.matches('.link')){
                    alert("foo");
                }   
            };
        </script>
    </body>
</html>

＆＃13;

如何使用event.target.matches匹配div元素

4 个答案: