首頁 > web前端 > js教程 > js阻止事件追加的具體實作_javascript技巧

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

WBOY
發布: 2016-05-16 16:34:03
原創
1282 人瀏覽過

有些時候可以使用 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()}

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板