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

Question

我试图使用在Stackoverflow上找到的一些代码来设置“当您单击元素外部时，关闭它”的功能：

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

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

有人能解释一下使用stopPropagation的后半部分吗？我不明白为什么需要它。

谢谢！ Matt

- Matt

Answer 1

想象一下：

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

并且：

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

点击每个元素时，查看发生了什么

当您单击 span 元素时，由于同时也点击了 div 元素，因此会触发 div 元素的点击事件。

如果我们只想弹出 span 元素的提示框，则需要停止在单击 span 元素时触发 div 元素的点击事件，代码如下：

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

现在看看会发生什么

- qwertymk

---

这是一个非常好的、易于理解的演示！真的很有帮助！ - Kumar

感谢您将其分解。我的错误是将 stopPropagation() 方法传递到父元素中。 - Victor Eke

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，因为公司不需要知道乘车情况。

- AlienWebguy

---

好的，这是一个很好的解释，但是如果我点击.show-list-button，为什么浏览器不首先将其视为文档点击呢？它是否有一些权衡系统来决定哪个函数首先通知单击事件？ - Matt

更多相关资料请查看事件顺序和https://dev59.com/73E85IYBdhLWcg3wr1ge#2667743。 - Ghostoy

@Bohemian没有幽默感，在他把"hooker"改成"taxi driver"后，就给这个回答点了踩。我相信你的母亲会为你的人生成就感到骄傲。 - AlienWebguy

我没有点踩。那很可能是举报你的回答有冒犯之处的人所为。 - Bohemian

钩子并不具有冒犯性，这完全是主观的。 - AlienWebguy

Answer 3

event.stopPropagation(); 阻止事件冒泡到DOM上级元素。如果没有这行代码，当单击 .show-list-button 时，文档的点击处理程序也会触发。有了它，文档的点击就不会触发。

- James Montagne

Answer 4

你读过这个吗？

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

它阻止事件冒泡到DOM树，防止任何父处理程序被通知该事件。

示例

在点击事件上停止冒泡。

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

- Warface