标签：
原地址：http://missra.com/article/web-57.html
嵌套的标签元素，如果父元素和子元素都绑定了一些事件，那么在点击最内层子元素时可能会触发父级元素的事件，下面介绍一下JavaScript阻止默认事件与JavaScript阻止事件冒泡示例。
（1）阻止冒泡事件
注：嵌套元素一般都存在冒泡事件，会带来某些影响
最外层标签：outer，中间层标签：center，最内层标签：inner，并且在outer、center、inner都添加了alert弹框事件，在正常思维情况下如果只点击内层元素，只会弹出绑定在该元素上的alert事件，但是，由于冒泡事件的原因，如果只点击内层元素首先触发被点击的内层元素的事件，然后会依次向外(向上级)冒泡触发外层事件，如下：
HTML：
|
1
2
3
4
5
|
<div id="outer" onclick="alert(‘Outer‘);">outer <div id="center" onclick="alert(‘Center‘);">center <div id="inner" onclick="alert(‘Inner‘);">inner</div> </div></div> |
CSS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
#outer { width:300px; border:1px solid #888; text-align:center; backgrond-color:#888; margin:0 auto;}#center { margin:20px; border:1px solid #aaa; text-align:center; backgrond-color:#aaa;}#inner { margin:20px; border:1px solid #ccc; text-align:center; text-align:center; backgrond-color:#ccc;} |
试想如果在项目开发中，某个按钮和他的父级同时绑定了很重要的事件，那么结果会惨不忍睹，这时的处理方法就是阻止冒泡事件，用下面的JS来阻止冒泡事件的发生。
JS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
var outerDom = document.getElementById("outer");var centerDom = document.getElementById("center");var innerDom = document.getElementById("inner");//阻止冒泡事件function stopBubble(e) {if (e && e.stopPropagation) {e.stopPropagation(); } else {window.event.cancelBubble = true; }//等价语句//window.event ? e.stopPropagation() : window.event.cancelBubble = false;}//为每个元素对象添加监听事件，如果监听到元素触发"click"事件，就引用上面阻止冒泡的方法stopBubble()来阻止冒泡事件的发生outerDom.addEventListener("click",function(e) {stopBubble(e);})//阻止outer冒泡centerDom.addEventListener("click",function(e) {stopBubble(e);})//阻止center冒泡innerDom.addEventListener("click",function(e) {stopBubble(e);})//阻止inner冒泡 |
用以上的JS代码阻止冒泡事件后效果如下：
（2）阻止默认事件
在前端开发工作中，由于浏览器兼容性等问题和一些特殊用处，比如禁止浏览器右键、禁止浏览器菜单等，需要用到阻止浏览器的默认事件
示例：阻止超链接
如下链接
阻止打开链接此默认事件，JS代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var aDom = window.document.getElementById("a");aDom.onclick = function (e) { //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.preventDefault) { //阻止默认浏览器动作(W3C) e.preventDefault(); } else { //IE中阻止函数器默认动作的方式 window.event.returnValue = false; return false; }} |
使用以上JS脚本后的效果如下：
点击链接的时候正常情况下会发生跳转，但是现在我们阻止了它的默认事件，即跳转事件，这时就不会跳转到玫莎了(备注：由于网站编辑器的原因无法给链接添加ID,所以演示的链接还是能打开)。
（3）jQeury阻止默认和冒泡事件
备注：一下代码中的"a"是元素标签，可以是"#id"或者".class"或者DOM对象
阻止冒泡事件
|
1
2
3
|
$("a").click(function (e) { e.stopPropagation();}); |
阻止默认事件
|
1
2
3
|
$("a").click(function (e) { e.preventDefault();}); |
阻止默认和冒泡事件
|
1
2
3
|
$("a").click(function (e) { return false;}); |
标签：
原文地址：http://www.cnblogs.com/chzng/p/5387806.html
