javascript 阻止冒泡和瀏覽器的預設行為詳解

在使用javascript編程時會遇到一個問題,就是當你給html添加事件時,由於瀏覽器預設的為冒泡型事件觸發機制,所以會觸發你不想觸發的事件.那麼通過如下的函數可以解決這個問題。

1、阻止事件冒泡

代碼如下	複製代碼
function stopBubble(e) {     // 如果提供了事件對象，則這是一個非IE瀏覽器     if (e && e.stopPropagation) {         // 因此它支援W3C的stopPropagation()方法         e.stopPropagation();     } else {         // 否則，我們需要使用IE的方式來取消事件冒泡         window.event.cancelBubble = true;     } }

2、阻止預設行為

當按鍵後或者點擊一個連結後，不希望按鍵或者連結執行時,可以取消傳回值.即停止預設事件預設行為

2.1、阻止連結

代碼如下	複製代碼
function stopDefault(e) {     // 阻止瀏覽器的預設行為     if (e && e.preventDefault) {         // 阻止預設瀏覽器動作(W3C)         e.preventDefault();     } else {         // IE中阻止函數器預設動作的方式         window.event.returnValue = false;     }       return false; }

樣本 : 點擊頁面的任何URL連結 不跳轉。

代碼如下	複製代碼
var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) {     links[i].onlick = function(e) {         alert('我不跳轉，點我也沒用');         stopDefault(e);     } }

2.2、阻止下拉式功能表

另一個阻止冒泡常見的應用就是下拉式功能表的效果，點擊按鈕，下拉式功能表顯示，在點擊頁面任何其它部分，下拉式功能表隱藏。

代碼如下	複製代碼
//給document添加點擊事件，點擊時關閉菜單，預設情況下，點擊任何元素，都會冒泡的到document document.onclick = function(){     b.style.display = "none"; }   //為點擊元素顯示下拉式功能表的元素阻止冒泡，這樣document的click事件就被阻止執行 function showMenu(e) {     var e = window.event || e;     b.style.display = "block";       if (e.stopPropagation) {         e.stopPropagation();     } else {         e.cancelBubble=true;     } }   btn.onclick=b.onclick = showMenu;

3、Jquery阻止事件冒泡
如果使用jquery庫的進行綁定dom的事件，處理方式則為：

代碼如下	複製代碼
$(selector).click(function(event) {     event.stopPropagation();     //do somethine });