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

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

 

1.阻止事件冒泡

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

 

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

//阻止瀏覽器的預設行為function stopDefault( e ) {    //阻止預設瀏覽器動作(W3C)    if ( e && e.preventDefault )        e.preventDefault();    //IE中阻止函數器預設動作的方式    else        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)     }}

 

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

 

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