防止冒泡和捕獲
w3c的方法是e.stopPropagation()魁蒜，IE則是使用e.cancelBubble = true
stopPropagation也是事件對象(Event)的一個方法曙寡，作用是阻止目標(biāo)元素的冒泡事件，但是會不阻止默認(rèn)行為佑惠。什么是冒泡事件？如在一個按鈕是綁定一個”click”事件，那么”click”事件會依次在它的父級元素中被觸發(fā) 膜蠢。stopPropagation就是阻止目標(biāo)元素的事件冒泡到父級元素。如：
<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>
上面的代碼莉兰，Demo如下,我們單擊test時挑围，會依次觸發(fā)alert(“l(fā)i”),alert(“ul”),alert(“div”)，這就是事件冒泡糖荒。
冒泡事件
阻止冒泡
window.event? window.event.cancelBubble = true : e.stopPropagation();
停止冒泡
//
document.getElementById("test").onclick=function(e){ alert("li"); window.event? window.event.cancelBubble = true : e.stopPropagation(); }
// ]]>·
w3c的方法是e.preventDefault()杉辙，IE則是使用e.returnValue = false;
preventDefault它是事件對象(Event)的一個方法，作用是取消一個目標(biāo)元素的默認(rèn)行為捶朵。既然是說默認(rèn)行為蜘矢，當(dāng)然是元素必須有默認(rèn)行為才能被取消，如果元素本身就沒有默認(rèn)行為综看，調(diào)用當(dāng)然就無效了品腹。什么元素有默認(rèn)行為呢？如鏈接<a>红碑，提交按鈕<input type=”submit”>等舞吭。當(dāng)Event 對象的 cancelable為false時，表示沒有默認(rèn)行為析珊，這時即使有默認(rèn)行為羡鸥，調(diào)用preventDefault也是不會起作用的。
我們都知道唾琼，鏈接<a>的默認(rèn)動作就是跳轉(zhuǎn)到指定頁面兄春，下面就以它為例，阻止它的跳轉(zhuǎn)：
//假定有鏈接<a id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}
演示：阻止鏈接跳轉(zhuǎn)的默認(rèn)行為
//
var a = document.getElementById("testA"); a.onclick =function(e){ if(e.preventDefault){ e.preventDefault(); }else{ window.event.returnValue == false; } }
// ]]>
javascript的return false只會阻止默認(rèn)行為锡溯，而是用jQuery的話則既阻止默認(rèn)行為又防止對象冒泡赶舆。
下面這個使用原生js，只會阻止默認(rèn)行為祭饭，不會停止冒泡
<div id='div'? onclick='alert("div");'>
<ul? onclick='alert("ul");'>
<li id='ul-a' onclick='alert("li");'><a >caibaojian.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};
演示：阻止鏈接默認(rèn)行為芜茵，沒有停止冒泡
//
var a = document.getElementById("testB"); a.onclick = function(){ return false; };
// ]]>
下面這個是使用jQuery，既阻止默認(rèn)行為又停止冒泡
<div id='div'? onclick='alert("div");'>
<ul? onclick='alert("ul");'>
<li id='ul-a' onclick='alert("li");'><a ,function(){
return false;
});
演示：既停止冒泡又阻止默認(rèn)行為
//
$("#testC").on('click',function(){ return false; });
// ]]>
當(dāng)需要停止冒泡行為時倡蝙，可以使用
function stopBubble(e) {
//如果提供了事件對象九串，則這是一個非IE瀏覽器
if ( e && e.stopPropagation )
? ? //因此它支持W3C的stopPropagation()方法
? ? e.stopPropagation();
else
? ? //否則，我們需要使用IE的方式來取消事件冒泡
? ? window.event.cancelBubble = true;
}
當(dāng)需要阻止默認(rèn)行為時，可以使用
//code from http://caibaojian.com/javascript-stoppropagation-preventdefault.html//阻止瀏覽器的默認(rèn)行為
function stopDefault( e ) {
? ? //阻止默認(rèn)瀏覽器動作(W3C)
? ? if ( e && e.preventDefault )
? ? ? ? e.preventDefault();
? ? //IE中阻止函數(shù)器默認(rèn)動作的方式
? ? else
? ? ? ? window.event.returnValue = false;
? ? return false;
}
event代表事件的狀態(tài)猪钮，例如觸發(fā)event對象的元素品山、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等烤低；
event對象只在事件發(fā)生的過程中才有效肘交。
firefox里的event跟IE里的不同，IE里的是全局變量扑馁，隨時可用涯呻；firefox里的要用參數(shù)引導(dǎo)才能用，是運行時的臨時變量腻要。
在IE/Opera中是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
}
