jquery - 停止传播() "Prevents the event from bubbling up the DOM tree": what does it means?

Question

我不太明白 e.stopPropagation() 的作用。

如果我有一个 link使用 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() 可以做什么？

Answer 1

简单，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();
});

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