有谁可以解释这种停止传播是如何工作的？

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'); });

Check out what happens when you click each one

当你点击跨度时，碰巧也会触发div，因为你也点击了div。

现在，如果我们想要提醒范围 ，我们需要在点击跨度时停止触发div，这样我们就可以了：

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

See what happens now

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()基本上说仅将此点击事件应用于此孩子节点，并且不会告诉父容器任何内容，因为我不希望他们做出反应。 / p>

以这种方式思考 - 你以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
});