JS阻止冒泡和取消默認事件(默認行爲)

原文連接：http://caibaojian.com/javascript-stoppropagation-preventdefault.html

js冒泡和捕獲是事件的兩種行爲，使用event.stopPropagation()起到阻止捕獲和冒泡階段中當前事件的進一步傳播。使用event.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;
}
}

演示：阻止連接跳轉的默認行爲
caibaojian.com

return false

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

下面這個使用原生js，只會阻止默認行爲，不會中止冒泡

//code from http://caibaojian.com/javascript-stoppropagation-preventdefault.html
<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;
});

演示：既中止冒泡又阻止默認行爲

• caibaojian.com

 

總結使用方法

當須要中止冒泡行爲時，可使用

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
}

文章目錄

• 防止冒泡和捕獲
• 取消默認事件
• return false
• 總結使用方法
• 事件注意點

 文章出處 ：http://caibaojian.com/javascript-stoppropagation-preventdefault.html