logo标签列表

当点击元素外部时，触发jQuery事件

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

});
我想知道如何实现这样一个功能：当用户点击某个 div （menuWraper）之外的区域时触发一个事件。我意识到可以通过让每次点击都触发一个事件，然后检查点击的 currentTarget 是否与从 $（“.menuWraper”）选定的对象相同来实现。但是这种方法不起作用，currentTarget 是 HTML 对象（？），而 $（“.menuWraper”）是 Object 对象？我非常困惑。
11个回答
77

只需让menuWrapper元素调用event.stopPropagation()函数，这样它的点击事件就不会冒泡到document上。

试一下：http://jsfiddle.net/Py7Mu/

$(document).click(function() {
    alert('clicked outside');
});

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

或者，您可以使用return false;代替event.stopPropagation();

25

如果您有像下拉菜单这样的子元素

$('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
  }
});
这确实是最佳答案。简明易懂，非常棒。 - GlennFriesen
12

这里最常见的应用场景是在单击文档时关闭，但不希望在该元素内部单击时关闭，因此您需要停止事件冒泡，像这样：

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

我们在这里所做的就是防止点击事件通过 冒泡（通过调用 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");
        }
    }
});
3
$(document).click((e) => {
  if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) {
  } else {
    this.onClose();
  }
});
我喜欢这个实现。 - oBo
2
我知道这个问题已经有答案了，但我希望我的解决方案能帮助其他人。
在我的情况下，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/

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

这段代码将会打开所需的菜单，并设置一个点击监听事件。当触发时，它会循环遍历目标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();         
   }
}
1

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

0

试试这个

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

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

    });
你能解释一下为什么这个方法比已经被接受的答案更好吗？ - Djizeus
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接