如何使用jQuery确定是否在特定元素中触发click事件？

Question

我正在使用以下代码来动画块.在我的代码中,如果当前可见,则div_animate()基本上<div>使用指定的选择器隐藏a .

$(document).click(function(event){
    div_animate("#container");
});

我需要确定用户是否点击了一个孩子,#container如果是的话,return false;- 据我所知,这个代码看起来像这样:

$(document).click(function(event){
    if ( /* the event's target has a parent of #container */ ) {
        return false;
    } else {
        div_animate("#container");
    }
});

有什么想法吗？

Answer 1

最简单的事情是:

if ($(event.target).is('#container *, #container')) // edited - thanks @gnarf
  // is a child
else
  // is not a child

您可以选择不同的选项来检测它是否是目标(或非目标)容器的子项; 那只是一个.替代:

if ($(event.target).closest('#container').length)

Answer 2

如果点击源自或在中#container,您可以阻止该操作,如下所示:

$(document).click(function(event){
    var c = $("#container")[0];
    if (event.target == c || $.contains(c, event.target)) {
        return false;
    } else {
        div_animate("#container");
    }
});

第一个检查是它是否来自#container自己,第二个检查是否来自一个孩子,那个#container $.contains().一种完全替代的,更简单的方法是document在点击时防止冒泡#container,如下所示:

$("#container").click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  div_animate("#container");
});