11

我试图使用我在 Stackoverflow 上找到的一些代码来设置这种“当你点击元素外部时，关闭它”类型的东西：

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

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

有人可以用 stopPropagation 解释后面的部分吗？我不明白为什么需要它。

谢谢！马特

4

4 回答 4

46

想象一下：

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

和：

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

看看当你点击每一个时会发生什么

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

现在，如果我们只想提醒 span，我们需要在点击 span 时停止触发 div 点击，所以我们这样做：

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

看看现在会发生什么

于 2011-07-22T02:18:34.023 回答
8

您的示例代码缺少一个重要部分：

$(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()基本上说只将此单击事件应用于THIS CHILD NODE并且不要告诉父容器任何内容，因为我不希望它们做出反应。

可以这样想——你以 100 美元租一辆出租车。司机给他的公司 80 美元。event.stopPropagation()就像告诉他保留所有 100 美元，因为公司不需要知道任何关于乘车的事情。

于 2011-07-22T02:16:40.700 回答
3

event.stopPropagation();防止事件冒泡 DOM。如果没有这一行，单击.show-list-button文档的单击处理程序也会触发。有了它，文档点击将不会触发。

于 2011-07-22T02:05:41.637 回答
1

你读过这个吗？

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

它防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

例子

杀死点击事件的冒泡。

$("p").click(function(event){
  event.stopPropagation();
  // do something
});
于 2011-07-22T02:05:15.347 回答