有些時候可以使用 e.stopPropagation(); e.preventDefault();來阻止事件冒泡,和預設事件的執行。但不能阻止事件的追加。
什麼情況下要阻止事件的追加呢?
例如:
點擊“結帳”,這樣的操作時,結帳本身有自己的事件,但結帳前要判斷是否登入。
我們可能會這樣寫:
Js代碼
if(isLogin){ //判斷是否登入
console.log("沒有登入")
}else{
//結帳相關代碼
}
如果點選「我的首頁」也有登入判斷
登入判斷代碼
if(isLogin){ //判斷是否登入
console.log("沒有登入")
}else{
//個人中心
}
如果還有更多的登入判斷。是不是就會有更多像上面的程式碼呢?後來我發現stopImmediatePropagation()這個方法, 阻止事件追加。上面的問題就不是問題了。
重要:.確保登入判斷事件是第一個綁定的事件。
Demo代碼
demo
結帳
<script> <br />
//最早綁定 <br />
$(".isLogin").on("click", function (e) { <br />
<br />
if(true){ //登入判斷 <br />
alert("沒有登入"); <br />
e.stopImmediatePropagation(); <br />
} <br />
<br />
return false; <br />
}); <br />
<br />
$(".bill").on("click",function(){ <br />
alert("結帳相關內容!"); <br />
}); <br />
<br />
$(".a1").on("click",function(){ <br />
alert("a1"); <br />
}); <br />
<br />
$(".a2").on("click",function(){ <br />
alert("a2"); <br />
}); <br />
<br />
$(".a3").on("click",function(){ <br />
alert("已加入購物車"); <br />
}); <br />
<br />
$(".a4").on("click",function(){ <br />
alert("有登入判斷"); <br />
}); <br />
<br />
<br />
</script>
其實,jquery給我們提供了查看事件的方法$._data($('.isLogin').get(0)),開啟firebug,在控制台輸入。
Js代碼
$._data($('.isLogin').get(0))
會看到如下:
Js代碼
Object { events={...}, handle=function()}
點選可以看到事件數組,方便查看元素上綁定了什麼樣的事件。