标签：
事件冒泡，举个列子：
<li>
<a href=‘http://www.baidu.com‘>点击a</a>
</li>
<script>
$(‘li‘).click(function () {
alert(‘点击了li‘);
});
$(‘a‘).click(function () {
alert(‘点击了a‘);
});
</script>
当你点击a的时候，会先弹出‘点击了a’，再弹出‘点击了li’，最后跳转到百度。简单理解就是先执行子元素的事件，再执行父元素的事件，跟事件捕获相反。
有些时候，我们不希望发生父元素的事件，只发生子元素的事件，这时候就需要阻止事件冒泡。有一下几个方法，分别分析一下：
1、event.stopPropagation();
2、event.cancelBubble = true;
3、event.preventDefault();
4、return false;
一、event.stopPropagation();
<script> $(‘li‘).click(function () { alert(‘点击了li‘); }); $(‘a‘).click(function (event) { alert(‘点击了a‘); event.stopPropagation(); }); </script>
完美阻止了li元素的冒泡，并且不会影响a的事件。效果是：先弹出‘点击了a’，然后跳转百度
注：之前看到说是不兼容IE8及一下，亲测IE6以上没问题，如有错，望指出。
二、event.cancelBubble = true;
<script> $(‘li‘).click(function () { alert(‘点击了li‘); }); $(‘a‘).click(function () { alert(‘点击了a‘); console.log(event); event.cancelBubble = true; }); </script>
使用cancelBubble需要注意：
event事件是窗口的MouseEvent，此处console.log打印的是：MouseEvent {isTrusted: true, screenX: 55, screenY: 90, clientX: 55, clientY: 29…}，
所以不在点击事件里面传event。(不要这样：$(‘a‘).click(function(event){});)。效果跟上面的是一样：先弹出‘点击了a’，然后跳转百度。刚刚测的时候，好像兼容性也还好。
三、event.preventDefault();
<script> $(‘li‘).click(function () { alert(‘点击了li‘); }); $(‘a‘).click(function (event) { alert(‘点击了a‘); event.preventDefault(); }); </script>
执行后的效果：先弹出‘点击了a’，再弹出‘点击了li’，但是，不执行跳转！不执行跳转！不执行跳转！
其实，default英文意思是默认的，想想不难理解，页面中，除了执行监听事件还会触发浏览器默认动作; 执行监听事件在前, 触发浏览器默认动作在后。
preventDefault准确来说并不是阻止事件冒泡，只是阻止浏览器的默认动作。而stopPropagation跟cancelBubble只是阻止事件冒泡，并没有阻止
浏览器的默认动作。当我们希望阻止事件冒泡的同时，也阻止浏览器的默认动作时，就可以2者都一起使用，如下代码：
<script> $(‘li‘).click(function () { alert(‘点击了li‘); }); $(‘a‘).click(function (event) { alert(‘点击了a‘); console.log(event); event.stopPropagation(); event.preventDefault(); }); </script>
效果是：只弹出‘点击了a’，并不跳转百度链接，也不弹出‘点击了li’。
（注：最好使用stopPropagation，避免preventDefault跟cancelBubble的event的对象不一致）；
四、最后的一个return false;
<script> $(‘li‘).click(function () { alert(‘点击了li‘); }); $(‘a‘).click(function () { alert(‘点击了a‘); return false; }); </script>
执行效果：只弹出‘点击了a’，并不跳转百度链接，也不弹出‘点击了li’。跟（stopPropagation+preventDefault）是一个效果。
退出执行, return false 之后的所有触发事件和动作都不会被执行. 有时候 return false 可以用来替代stopPropagation() 和
preventDefault(), 比如上面的例子。
值得注意的一点：有人认为 return false = stopPropagation() + preventDefault()，其实是错的。 return false 不但阻止事件，
还可以返回对象, 跳出循环等... 方便地一刀切而不够灵活, 滥用易出错。
贴一下本博客的html的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> </head> <body> <ul> <li> <a href=‘#‘>点击a</a> </li> </ul> <script src="jquery-1.11.3.min.js"></script> <script> $(‘li‘).click(function () { alert(‘点击了li‘); }); $(‘a‘).click(function (event) { alert(‘点击了a‘); console.log(event); event.stopPropagation(); // event.cancelBubble = true; event.preventDefault(); // return false; }); </script> </body> </html>
js阻止事件冒泡stopPropagation()、cancelBubble、preventDefault()、return false的分析
标签：
原文地址：http://www.cnblogs.com/wuzhiquan/p/5380800.html
