如何“处理”来自children元素的单击

Question

这是我的code：

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