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