单击元素外部时的jQuery触发事件答案

【问题标题】：jQuery trigger event when click outside the element单击元素外部时的jQuery触发事件
【发布时间】：2019-04-16 17:21:39
【问题描述】：

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

});

我试图弄清楚如何做到这一点，以便如果用户在某个 div (menuWraper) 之外单击，它会触发一个事件。我意识到我可以让每次点击都触发一个事件，然后检查是否单击的 currentTarget 与从 $(".menuWraper") 中选择的对象相同。但是，这不起作用， currentTarget 是 HTML object(?) 而 $(".menuWraper") 是 Object 对象？我很困惑。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

只需让您的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();

【讨论】：

【解决方案2】：

如果您有下拉菜单等子元素

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

【讨论】：

这确实是最好的答案。简洁易懂。太好了。

【解决方案3】：

这里最常见的应用程序是在单击文档时关闭，但在文档来自该元素时关闭，为此您要停止冒泡，如下所示：

$(".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，如果它到达那里，我们会隐藏那些.menuWrapper 元素。

【讨论】：

【解决方案4】：

试试这些..

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

【讨论】：

【解决方案5】：

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

【讨论】：

我喜欢这个实现

【解决方案6】：

我知道该问题已得到解答，但我希望我的解决方案对其他人有所帮助。

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/

【讨论】：

【解决方案7】：

此代码将打开相关菜单，并设置点击监听事件。触发时，它将遍历目标 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();         
   }
}

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

试试这个

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

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

    });

【讨论】：

您能解释一下如何/为什么这会比已经接受的答案更好吗？

【解决方案11】：

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

【讨论】：