有人可以解释一下这个 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。

现在，如果我们想要仅提醒跨度，我们需要在单击跨度时停止触发 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() 基本上表示仅将此点击事件应用于此子节点，并且不告诉父容器任何内容，因为我不希望它们这样做反应。。

试想一下——你花 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
});