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

user_3128156 0
Viewed 20220
<!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?

dom html jquery javascript
4 Answers

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')

user_35517860

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

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

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

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

user_14913880

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>

user_67728620
Related