stopPropagation()"阻止事件冒泡DOM树":这意味着什么？

Question

我真的不明白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()可以做些什么吗？

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

单击按钮标题"传播"(默认行为)将"传播单击"和"容器单击"写入控制台.单击包含呼叫的按钮e.stopPropagation()将不会打印"容器点击"消息,因为传播到容器已经停止.