阻止jQuery事件冒泡

標籤：c   style   class   blog   java   a   

Query對DOM的事件觸發具有冒泡特性。有時利用這一特性可以減少重複代碼，但有時候我們又不希望事件冒泡。這個時候就要阻止 jQuery.Event冒泡。

 

在jQuery.Event 的文檔 中的開頭得知，jQuery.Event對象是符合W3C標準的一個事件對象，同時jQuery.Event免去了檢查相容IE的步驟。

 

jQuery.Event提供了一個非常簡單的方法來阻止事件冒泡：event.stopPropagation();

 

Js代碼  

1. $("p").click(function(event){  
2.     event.stopPropagation(); // do something  
3. })  

 

但是這個方法對使用live 綁 定的事件沒有作用，需要一個更簡單的方法阻止事件冒泡：return false;

 

Js代碼  

1. $("p").live("click", function(){  
2.     $(this).after("Another paragraph!");  
3.     return false;  
4. });  

 

 

另外 JavaScript 阻止冒泡

 

　阻止冒泡事件的方法有兩種，第一種是IE的方法，第二種是DOM方法，至於為什麼要分為兩種方法去討論之，這裡就不做討論了，總之是瀏覽器一些蹩 腳的問題，好了廢話不說了，直接貼代碼了：

 

Js代碼  

1. //阻止冒泡事件  
2.  function stopBubble(e) {  
3.      if (e && e.stopPropagation) {//非IE  
4.          e.stopPropagation();  
5.      }  
6.      else {//IE  
7.          window.event.cancelBubble = true;  
8.      }  
9.  }  

 

舉個例子：就是Google首頁的更多選項吧，不知道的可以去看看http://www.google.com/ 。
這裡要應用兩個點擊事件，一個是div.onclick，另一個就是document.onclick，那麼問題就出現了，在調用 div.onclick的時候，由於冒泡事件的存在，會自動的調用document.onclick，由於冒泡的順序是從裡向外的

（div->body->document->html）所以div.onclick事件就會被覆蓋掉，也就不會執行了，解決的方案其 實也是很簡單的哦，就是在執行div.onclick的時候阻止冒泡事件就好了，那怎麼阻止呢，就調用上面的函數就ok了！哈哈！ 
ps：在介紹 一下阻止瀏覽器預設行為的方法，大同小異，這裡就不再贅述了。

 

Js代碼  

1. function stopDefault(e) {  
2.      //阻止預設瀏覽器動作(W3C)  
3.      if (e && e.preventDefault)  
4.          e.preventDefault();  
5.      //IE中阻止函數器預設動作的方式  
6.      else  
7.          window.event.returnValue = false;  
8.      return false;  
9.  }