5

我真的不明白 e.stopPropagation() 做什么。

如果我有一个指向处理程序的链接return false，我应该得到我想要的（防止默认链接行为，所以它不会“调用”下一个 href 位置）：

<a id="myLink" href="http://www.google.com">Go to google</a>​

$('#myLink').click(function (e) {
    alert("No, you don't go to Google");
    return false;
});​

添加e.stopPropagation()我能得到什么？你能给我一个可靠的例子，向我展示e.stopPropagation()可以做什么吗？

4

4 回答 4

11

简单，stopPropagation阻止任何事件冒泡到它的容器、它的容器的容器等。

这是一个活生生的例子：http: //jsfiddle.net/5B7sw/

HTML：

<div id="container">
    <button id="propagate">Propagate</button>
    <button id="nopropagate">Do not Propagate</button>
</div>

和js：

$('#container').click(function(){
   console.log('container click') ;
});


$('#propagate').click(function(){
   console.log('propagateclick');
});


$('#nopropagate').click(function(e){
   console.log('nopropagateclick');
    e.stopPropagation();
});

单击按钮标题“传播”（默认行为）会将“传播单击”和“容器单击”写入控制台。单击包含调用的按钮e.stopPropagation()将不会打印“容器单击”消息，因为到容器的传播已停止。

于 2012-06-08T09:27:58.057 回答
1

在你的例子e.stopPropagation()中什么都不做。

e.stopPropagation()可以在嵌套元素的情况下使用，以防止其他元素接收事件。

于 2012-06-08T09:26:57.727 回答
0

不是你想的那样。。

停止传播意味着同一事件不会传播到其父标签。

于 2012-06-08T09:28:03.263 回答
0

event.stopPropagation() 将防止事件通过其祖先冒泡。这意味着任何使用.delegate()或.live()匹配相关子元素的处理程序都不会触发。这是一个演示来说明这一事实：http: //jsfiddle.net/fSBGC/6/

于 2012-06-08T09:42:42.033 回答