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\");
             


        

Answer 1

try these..

$(document).click(function(evt) {
    var target = evt.target.className;
    var inside = $(".menuWraper");
    //alert($(target).html());
    if ($.trim(target) != '') {
        if ($("." + target) != inside) {
            alert("bleep");
        }
    }
});

Answer 2

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.

Answer 3

This code will open the menu in question, and will setup a click listener event. When triggered it will loop through the target id's parents until it finds the menu id. If it doesn't, it will hide the menu because the user has clicked outside the menu. I've tested it and it works.

function tog_alerts(){
   if($('#Element').css('display') == 'none'){
       $('#Element').show();
       setTimeout(function () {
           document.body.addEventListener('click', Close_Alerts, false);
       }, 500);
   }
}

function Close_Alerts(e){
   var current = e.target;
   var check = 0;
   while (current.parentNode){
      current = current.parentNode
      if(current.id == 'Element'){
         check = 1;
      }
   }
   if(check == 0){
      document.body.removeEventListener('click', Close_Alerts, false);
      $('#Element').hide();         
   }
}

Answer 4

function handler(event) {
 var target = $(event.target);
 if (!target.is("div.menuWraper")) {
  alert("outside");
 }
}
$("#myPage").click(handler);

Answer 5

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();