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