jquery - 避免事件通过 DOM 冒泡（父母对孩子）

Question

<div class="dark">
    <div class="window">
    </div>
<div>

$("div.dark").click(function(e){

       e.stopPropagation();
       $('.dark').fadeOut('fast');
});

问题是当我点击窗口本身时，一切都在淡出，所以我只想在点击 div.dark 时让它淡出。无法弄清楚如何做到这一点， stopPropagation() 不起作用。

Answer 1

绑定到内部div

$("div.dark").click(function(e)
{
       if(e.target === this) $('.dark').fadeOut('fast');
});

Answer 2

调用.stopPropagation()可防止事件通过 DOM 树冒泡。在您的情况下，您希望防止对子项的单击触发父项上的单击事件。为此，您需要将点击事件侦听器附加到子级，并阻止事件传播。你这样做的方式已经太晚了，因为事件已经到达元素并且点击回调已经触发。您唯一要做的就是防止点击在 DOM 中进一步冒泡。

为了防止对具有类的元素window的单击触发对父元素的单击，您可以将单击事件侦听器附加到该元素，并在回调中停止传播。如果您也添加它，我相信您的代码应该可以按预期工作：

$(".window").click(function(e) { e.stopPropagation(); });

这样点击window不会到达父级，因此不会触发您附加到父级的点击事件回调。