JS如果阻止事件冒泡和浏览器默认事件

原地址：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）阻止默认事件

在前端开发工作中，由于浏览器兼容性等问题和一些特殊用处，比如禁止浏览器右键、禁止浏览器菜单等，需要用到阻止浏览器的默认事件

示例：阻止超链接

如下链接

http://www.missra.com

阻止打开链接此默认事件，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脚本后的效果如下：

http://www.missra.com

点击链接的时候正常情况下会发生跳转，但是现在我们阻止了它的默认事件，即跳转事件，这时就不会跳转到玫莎了(备注：由于网站编辑器的原因无法给链接添加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;
});