JavaScript停止冒泡和阻止瀏覽器預設行為

標籤：pre   cti   iba   event對象   ntb   狀態   ret   滑鼠   代碼   

 

事件相容

function myfn(e){ var evt = e ? e:window.event; }

js停止冒泡

function myfn(e){window.event? window.event.cancelBubble = true : e.stopPropagation();}

js阻止預設行為

function myfn(e){window.event? window.event.returnValue = false : e.preventDefault();}

以下是具體關於JavaScript停止冒泡和阻止預設行為的詳細說明

防止冒泡

w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true

stopPropagation也是事件對象(Event)的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止預設行為。什麼是冒泡事件？如在一個按鈕是綁定一個”click”事件，那麼”click”事件會依次在它的父級元素中被觸發 。stopPropagation就是阻止目標元素的事件冒泡到父級元素。如：

<div id=‘div‘ onclick=‘alert("div");‘><ul onclick=‘alert("ul");‘><li onclick=‘alert("li");‘>test</li></ul></div>

上面的代碼，Demo如下,我們單擊test時，會依次觸發alert(“li”),alert(“ul”),alert(“div”)，這就是事件冒泡。

• 測試冒泡

阻止冒泡

window.event? window.event.cancelBubble = true : e.stopPropagation();

• 停止冒泡

 

阻止預設行為

w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;

preventDefault它是事件對象(Event)的一個方法，作用是取消一個目標元素的預設行為。既然是說預設行為，當然是元素必須有預設行為才能被取消，如果元素本身就沒有預設行為，調用當然就無效了。什麼元素有預設行為呢？如連結<a>，提交按鈕<input type=”submit”>等。當Event 對象的 cancelable為false時，表示沒有預設行為，這時即使有預設行為，調用preventDefault也是不會起作用的。

我們都知道，連結<a>的預設動作就是跳轉到指定頁面，下面就以它為例，阻止它的跳轉：

//假定有連結<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>var a = document.getElementById("testA");a.onclick =function(e){if(e.preventDefault){e.preventDefault();}else{window.event.returnValue == false;}}

示範：阻止連結跳轉的預設行為

return false

javascript的return false只會阻止預設行為，而是用jQuery的話則既阻止預設行為又防止對象冒泡。

下面這個使用原生js，只會阻止預設行為，不會停止冒泡

<div id=‘div‘  onclick=‘alert("div");‘><ul  onclick=‘alert("ul");‘><li id=‘ul-a‘ onclick=‘alert("li");‘><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li></ul></div>var a = document.getElementById("testB");a.onclick = function(){return false;};

示範：阻止連結預設行為，沒有停止冒泡

• caibaojian.com

下面這個是使用jQuery，既阻止預設行為又停止冒泡

<div id=‘div‘  onclick=‘alert("div");‘><ul  onclick=‘alert("ul");‘><li id=‘ul-a‘ onclick=‘alert("li");‘><a href="http://caibaojian.com/"id="testC">caibaojian.com</a></li></ul></div>$("#testC").on(‘click‘,function(){return false;});

示範：既停止冒泡又阻止預設行為

總結使用方法

當需要停止冒泡行為時，可以使用

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

當需要阻止預設行為時，可以使用

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

事件注意點

1. event代表事件的狀態，例如觸發event對象的元素、滑鼠的位置及狀態、按下的鍵等等；
2. event對象只在事件發生的過程中才有效。

firefox裡的event跟IE裡的不同，IE裡的是全域變數，隨時可用；firefox裡的要用參數引導才能用，是運行時的臨時變數。
在IE/Opera中是window.event，在Firefox中是event；而事件的對象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中兩者都可用。

1. 下面兩句效果相同：

function a(e){var e = (e) ? e : ((window.event) ? window.event : null); var e = e || window.event; // firefox下window.event為null, IE下event為null}

JavaScript停止冒泡和阻止瀏覽器預設行為