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

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美元一样,因为公司不需要知道任何关于骑行的事情.