原地址：http://missra.com/article/web-57.html
嵌套的标签元素，如果父元素和子元素都绑定了一些事件，那么在点击最内层子元素时可能会触发父级元素的事件，下面介绍一下JavaScript阻止默认事件与JavaScript阻止事件冒泡示例。
（1）阻止冒泡事件
注：嵌套元素一般都存在冒泡事件，会带来某些影响
最外层标签：outer，中间层标签：center，最内层标签：inner，并且在outer、center、inner都添加了alert弹框事件，在正常思维情况下如果只点击内层元素，只会弹出绑定在该元素上的alert事件，但是，由于冒泡事件的原因，如果只点击内层元素首先触发被点击的内层元素的事件，然后会依次向外(向上级)冒泡触发外层事件，如下：
outer
center
inner
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代码阻止冒泡事件后效果如下：
outer
center
inner
（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;
});