jQuery trigger event when click outside the element

Question

$(document).click(function(evt) {     var target = evt.currentTarget;     var inside = $(".menuWraper");     if (target != inside) {         alert("bleep");     }  }); 

I am trying to figure out how to make it so that if a user clicks outside of a certain div (menuWraper), it triggers an event.. I realized I can just make every click fire an event, then check if the clicked currentTarget is same as the object selected from $(".menuWraper"). However, this doesn't work, currentTarget is HTML object(?) and $(".menuWraper") is Object object? I am very confused.

Answer 1

Just have your menuWraper element call event.stopPropagation() so that its click event doesn't bubble up to the document.

Try it out: http://jsfiddle.net/Py7Mu/

$(document).click(function() {     alert('clicked outside'); });  $(".menuWraper").click(function(event) {     alert('clicked inside');     event.stopPropagation(); }); 

• http://api.jquery.com/event.stopPropagation/

Alternatively, you could return false; instead of using event.stopPropagation();

Answer 2

if you have child elements like dropdown menus

$('html').click(function(e) {   //if clicked element is not your element and parents aren't your div   if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) {     //do stuff   } });