js阻止事件追加的具體實作_javascript技巧

有些時候可以使用 e.stopPropagation(); e.preventDefault();來阻止事件冒泡，和預設事件的執行。但不能阻止事件的追加。

什麼情況下要阻止事件的追加呢？

例如：

點擊“結帳”，這樣的操作時，結帳本身有自己的事件，但結帳前要判斷是否登入。

我們可能會這樣寫：

Js代碼

複製程式碼 程式碼如下:

if(isLogin){ //判斷是否登入
console.log("沒有登入")
}else{
//結帳相關代碼
}

如果點選「我的首頁」也有登入判斷
登入判斷代碼

if(isLogin){ //判斷是否登入
console.log("沒有登入")
}else{
//個人中心
}

如果還有更多的登入判斷。是不是就會有更多像上面的程式碼呢？後來我發現stopImmediatePropagation()這個方法， 阻止事件追加。上面的問題就不是問題了。

重要：.確保登入判斷事件是第一個綁定的事件。

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()}

點選可以看到事件數組，方便查看元素上綁定了什麼樣的事件。