Capturing clicks outside DOM element

Question

I want to capture clicks outside an HTML tag. For example I have this HTML:

<body> 
 <div>
  <ul>
   <li id="button">
   </li>
  </ul>
 </div>
</body>

The #button is a smallest square in the middle of the page. Once user clicks outside it something happens, click inside and nothing should happen.

This JS doesn't work because of event propagation:

jQuery('*').not('li#button').click(...);

so my click event eventually fires on ul, div and body triggering the event. I can't use this:

jQuery('*').click(function(e) {
 e.stopPropagation();
 if(e.(...)) {}
})

because other events on the page stop working.

What's the other way of achieving this?

possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — idmean, Aug 25 '14 at 10:31

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

$(document).bind('click', function(e) {
    if($(e.target).closest('#button').length == 0) {
        // yourlogic
    }
});

edited May 23 '17 at 10:25

Community

answered Aug 25 '14 at 10:29

Rahul Tripathi

score 0 · Answer 2 · answered Aug 25 '14 at 10:34

0

$(document).click(function(e){
e.stopPropagation();
if($(e.Target).attr(id) != "button"){
    // Your logic
    }
});

answered Aug 25 '14 at 10:34

Jayant

Next time please explain your answer and format your code properly – Lucas Trzesniewski Aug 25 '14 at 11:29

2 Answers2