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

Question

我正在使用以下代码为块设置动画。在我的代码中，div_animate() 实质上隐藏了带有指定选择器的<div>（如果它当前可见）。

$(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 或在#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()。另一种更简单的方法是在单击#container 时阻止气泡达到document，如下所示：

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