javascript - How to use event.target.matches to match div element

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

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 Sahand 8,36026 gold badges78 silver badges149 bronze badges

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

Sorted by: 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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to use event.target.matches to match div element - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)