jQuery trigger event when click outside the element
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();});
Alternatively, you could return false;
instead of using event.stopPropagation();
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 }});
The most common application here is closing on clicking the document but not when it came from within that element, for this you want to stop the bubbling, like this:
$(".menuWrapper").click(function(e) { e.stopPropagation(); //stops click event from reaching document});$(document).click(function() { $(".menuWrapper").hide(); //click came from somewhere else});
All were doing here is preventing the click from bubbling up (via event.stopPrpagation()
) when it came from within a .menuWrapper
element. If this didn't happen, the click came from somewhere else, and will by default make it's way up to document
, if it gets there, we hide those .menuWrapper
elements.