admin管理员组

文章数量:1222398

<!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>

I'm trying to make alert(foo); execute only when we are NOT clicking on anything inside of the div tag in the body. Unfortunately, it executes no matter where I click. Why?

<!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>

I'm trying to make alert(foo); execute only when we are NOT clicking on anything inside of the div tag in the body. Unfortunately, it executes no matter where I click. Why?

  • javascript
  • jquery
  • html
  • dom
Share Improve this question edited Nov 3, 2017 at 12:22 Zakaria Acharki 67.5k15 gold badges78 silver badges105 bronze badges asked Nov 3, 2017 at 12:07 SahandSahand 8,36026 gold badges78 silver badges149 bronze badges 1
  • Tried your logic (in Chrome) on a random site (changing the selector string)... and that seems to work as intended. Could it be a css issue of your div.dropdown-content that messes it up? – faerin Commented Nov 3, 2017 at 12:17
Add a comment  | 

4 Answers 4

Reset to default 13 

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>

Get your element and use contains to check whether click is in or outside. If outside then alert.

matches is not working because you are clicking in a tag which is not having .dropdown-content tag. So everytime value comes false. And it alert('foo')

As i seen you have to add content to de div.conta, i made a demo And work with the dom, className( imade right, but can use any):

<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");
                }   
            };

If you're using jQuery you can do the following:

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

See the following JSFiddle: https://jsfiddle.net/4nb691a0/

Because your if statement returns false and with ! operator returns true. It happens because when you clicked inside the div your actual target is <a> element which does not have class .dropdown-content.

When click outside the div it also does not have class .dropdown-content. So your statement always returns false but with ! operator it becomes true.

Try this:

<!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>

本文标签： javascriptHow to use eventtargetmatches to match div elementStack Overflow

版权声明：本文标题：javascript - How to use event.target.matches to match div element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739385301a2160901.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。