在元素外部单击时发生jquery触发器事件

只要拥有你 menuWraper 元素调用 event.stopPropagation() 使其单击事件不会冒泡到 document .

试一试: 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/

或者,你可以 return false; 而不是使用 event.stopPropagation();

如果您有下拉菜单之类的子元素

$('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
  }
});

这里最常见的应用程序是在单击文档时关闭,而不是在文档来自该元素时关闭,为此,您希望停止冒泡,如下所示:

$(".menuWrapper").click(function(e) {
  e.stopPropagation(); //stops click event from reaching document
});
$(document).click(function() {
  $(".menuWrapper").hide(); //click came from somewhere else
});

所有在这里做的都是阻止点击 bubbling up (通过 event.stopPrpagation() )当它从一个 .menuWrapper 元素。如果这样 没有 发生了,点击来自其他地方,默认情况下会使其达到 document 如果它到了那里,我们就把它们藏起来 MNUR包装器 元素。

试试这些…

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

我知道这个问题已经被回答了,但我希望我的解决方案能帮助其他人。

stopPropagation 在我的案例中引起了问题,因为我需要 click 其他事件。此外,并非每个元素都应该在单击时关闭DIV。

我的解决方案:

$(document).click(function(e) {
    if (($(e.target).closest("#mydiv").attr("id") != "mydiv") &&
        $(e.target).closest("#div-exception").attr("id") != "div-exception") {
        alert("Clicked outside!");
    }
});

http://jsfiddle.net/NLDu3/

此代码将打开相关菜单,并设置单击侦听器事件。当被触发时,它将循环通过目标ID的父级,直到找到菜单ID。如果没有,它将隐藏菜单,因为用户已在菜单外单击。我已经测试过了,而且效果很好。

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

我认为文档不会触发单击事件。尝试使用body元素捕获click事件。可能需要检查一下…

试试这个

    $(document).click(function(event) {

        if(event.target.id === 'xxx' )
            return false;
        else {
              // do some this here
        }

    });

$(document).click((e) => {
  if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) {
  } else {
    this.onClose();
  }
}); 

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

    var visibleNotification = false;

  function open_notification() {
        if (visibleNotification == false) {
            $('.notification-panel').css('visibility', 'visible');
            visibleNotification = true;
        } else {
            $('.notification-panel').css('visibility', 'hidden');
            visibleNotification = false;
        }
    }

    $(document).click(function (evt) {
        var target = evt.target.className;
        if(target!="fa fa-bell-o bell-notification")
        {
            var inside = $(".fa fa-bell-o bell-notification");
            if ($.trim(target) != '') {
                if ($("." + target) != inside) {
                    if (visibleNotification == true) {
                        $('.notification-panel').css('visibility', 'hidden');
                        visibleNotification = false;
                    }
                }
            }
        }
    });