javascript - 有人可以解释这个 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'); });

Check out what happens when you click each one

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

现在，如果我们想仅提醒 span，我们需要在单击 span 时停止触发 div 点击，因此我们这样做:

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

See what happens now