怎樣阻止JS的冒泡和瀏覽器的預設行為

這次帶給大家怎樣阻止JS的冒泡和瀏覽器的預設行為，阻止JS的冒泡和瀏覽器的預設行為的注意事項有哪些，下面就是實戰案例，一起來看一下。

事件相容:

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=&#39;div&#39; onclick=&#39;alert("div");&#39;>
<ul onclick=&#39;alert("ul");&#39;>
<li onclick=&#39;alert("li");&#39;>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)的一個方法，作用是取消一個目標元素的預設行為。既然是說預設行為，當然是元素必須有預設行為才能被取消，如果元素本身就沒有預設行為，呼叫當然就無效了。什麼元素有預設行為呢？如連結，提交按鈕等。當Event 物件的 cancelable為false時，表示沒有預設行為，這時即使有預設行為，呼叫preventDefault也是不會運作的。

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

//假定有链接<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=&#39;div&#39;  onclick=&#39;alert("div");&#39;>
<ul  onclick=&#39;alert("ul");&#39;>
<li id=&#39;ul-a&#39; onclick=&#39;alert("li");&#39;><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

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

<div id=&#39;div&#39;  onclick=&#39;alert("div");&#39;>
<ul  onclick=&#39;alert("ul");&#39;>
<li id=&#39;ul-a&#39; onclick=&#39;alert("li");&#39;><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; 
}

事件注意點

event代表事件的狀態，例如觸發event物件的元素、滑鼠的位置及狀態、按下的鍵等等；

event物件只在事件發生的過程中才有效。

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

下面兩句效果相同：

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery必須掌握的API

#aja的非同步上傳外掛程式

jQuery實作多層驗證後的表單驗證

以上是怎樣阻止JS的冒泡和瀏覽器的預設行為的詳細內容。更多資訊請關注PHP中文網其他相關文章！