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树。在您的情况下，您希望阻止对子项的单击触发父项上的单击事件。要实现这一点，您需要将click事件侦听器附加到子级，并停止传播事件。你这样做的方式已经太晚了，因为事件已经到了元素并且click-callback已经被触发了。你唯一要做的就是阻止点击进一步向上冒泡。

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

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

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

避免事件通过DOM冒泡（Parent to Children）

2 个答案: