jquery - 如何“不处理”来自子元素的点击

Question

这是我的代码：

HTML：

<div id="container">
    <div id="box">
        Content
    </div>
</div>​

CSS：

#container
{
    position:relative;
    width:400px;
    height:400px;
    background-color:red;
}

#box
{
    position:absolute;
    width:200px;
    height:200px;
    top:100px;
    left:100px;
    background-color:blue;
}
​

jQuery :

$('#container:not(#box)').click(function (e) {
    e.preventDefault();
    $('#container').fadeOut(300);
});​

我只想fadeOut单击父级（红色 div）。如果我点击蓝色的（孩子），什么都不会发生。我怎么能用 jQuery 做到这一点？尝试过，:not但似乎这不是正确的解决方案......

Answer 1

您只需检查事件源自 ( e.target) 的元素是否是#container( this)：

$('#container').click(function (e) {
    if (e.target === this) {
        $('#container').fadeOut(300);
    }
});​

Answer 2

当您单击 时#box，该click事件也会在父#container元素上注册，因为该事件会冒泡。

有两种方法可以防止这种情况发生。

首先是阻止冒泡的发生。您可以通过调用点击处理程序e.stopPropagation()来做到这一点。#box但是，当然，您没有#box事件处理程序，所以下一个更有吸引力。

其次是从#container事件处理程序中检查您是否单击了实际#container或某个子项，并且该事件刚刚冒泡。您可以通过检查e.target元素并将其this与#container事件处理程序中的元素进行比较来做到这一点。

Answer 3

$('#container').click(function () {
    $('#container').fadeOut(300);
});

$('#box').click(function (e) {
    e.stopPropagation()
});