有人可以解释一下这个 stopPropagation 是如何工作的吗？

Question

我试图使用我在 Stackoverflow 上找到的一些代码来设置这种“当你点击元素外部时，关闭它”类型的东西：

$(document).click(function() {
 $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
 event.stopPropagation();
});

有人可以用 stopPropagation 解释后面的部分吗？ 我不明白为什么需要它。

谢谢！ 马特

Answer 1

想象一下：

<div>
    DIV
    <span>
        Span
    </span>
<div>

和：

$('div').click(function() { alert('div clicked'); });
$('span').click(function() { alert('span clicked'); });

看看当你点击每一个时会发生什么

当您单击跨度时，它恰好也触发了 div，因为您也单击了 div。

现在，如果我们只想提醒 span，我们需要在点击 span 时停止触发 div 点击，所以我们这样做：

$('div').click(function() { alert('div clicked'); });
$('span').click(function(e) { alert('span clicked'); e.stopPropagation(); });

看看现在会发生什么

Answer 2

您的示例代码缺少一个重要部分：

$(document).click(function() {
    $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
    event.stopPropagation();
    $('.list-to-hide').show();
});

如果没有event.stopPropagation() ，它将显示列表，然后将其隐藏，因为.show-list-button在$(document)内，因此两个单击处理程序都会触发。 event.stopPropagation()基本上说只将此单击事件应用于THIS CHILD NODE并且不告诉父容器任何内容，因为我不希望它们做出反应。

可以这样想——你以 100 美元租一辆出租车。 司机给他的公司 80 美元。 event.stopPropagation()就像告诉他保留所有 100 美元，因为公司不需要知道任何关于骑行的信息。

Answer 3

event.stopPropagation(); 防止事件冒泡 DOM。 如果没有这一行，单击.show-list-button文档的单击处理程序也会触发。 有了它，文档点击将不会触发。

Answer 4

你读过这个吗？

http://api.jquery.com/event.stopPropagation/

它防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

例子

杀死点击事件的冒泡。

$("p").click(function(event){
  event.stopPropagation();
  // do something
});