js阻止事件追加的具體實(shí)現(xiàn)
更新時(shí)間：2014年10月15日 17:54:53 投稿：whsnow
可以使用 e.stopPropagation(); e.preventDefault();來阻止事件冒泡，和默認(rèn)事件的執(zhí)行。但不能阻止事件的追加，如要追加，請(qǐng)看下面的實(shí)現(xiàn)方法
有些時(shí)候可以使用 e.stopPropagation(); e.preventDefault();來阻止事件冒泡，和默認(rèn)事件的執(zhí)行。但不能阻止事件的追加。
什么情況下要阻止事件的追加呢？
比如：
點(diǎn)擊“結(jié)賬”，這樣的操作時(shí)，結(jié)賬本身有自己的事件，但結(jié)賬前要判斷是否登錄。
我們可能會(huì)這樣寫：
Js代碼
復(fù)制代碼 代碼如下:
if(isLogin){ //判斷是否登錄
console.log("沒有登錄")
}else{
//結(jié)賬相關(guān)代碼
}
如果點(diǎn)擊“我的主頁”也有登錄判斷
登錄判斷代碼
if(isLogin){ //判斷是否登錄
console.log("沒有登錄")
}else{
//個(gè)人中心
}
如果還有更多的登錄判斷。是不是就會(huì)有更多像上面的代碼呢？后來我發(fā)現(xiàn)stopImmediatePropagation()這個(gè)方法， 阻止事件追加。上面的問題就不是問題了。
重要：.確保登錄判斷事件是第一個(gè)綁定的事件。
Demo代碼
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<a href="#" class="bill isLogin">結(jié)賬 </a>
<ul>
<li class="a1 isLogin">加入收藏夾</li>
<li class="a2 isLogin">他人支付</li>
<li class="a3">加入購(gòu)入車</li>
<li class="a4 isLogin">我的主頁</li>
</ul>
<script>
//最先綁定
$(".isLogin").on("click", function (e) {
if(true){ //登錄判斷
alert("沒有登錄");
e.stopImmediatePropagation();
}
return false;
});
$(".bill").on("click",function(){
alert("結(jié)賬相關(guān)內(nèi)容！");
});
$(".a1").on("click",function(){
alert("a1");
});
$(".a2").on("click",function(){
alert("a2");
});
$(".a3").on("click",function(){
alert("已加入購(gòu)物車");
});
$(".a4").on("click",function(){
alert("有登錄判斷");
});
</script>
</body>
</html>
其實(shí)，jquery給我們提供了查看事件的方法$._data($('.isLogin').get(0))，打開firebug，在控制臺(tái)輸入。
Js代碼
$._data($('.isLogin').get(0))
會(huì)看到如下：
Js代碼
Object { events={...}, handle=function()}
點(diǎn)擊可以看到事件數(shù)組，方便查看元素上綁定了什么樣的事件。
相關(guān)文章
jsonp跨域及實(shí)現(xiàn)百度首頁聯(lián)想功能的方法
這篇文章主要介紹了jsonp跨域及實(shí)現(xiàn)百度首頁聯(lián)想功能的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
原生JavaScript輪播圖實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了原生JavaScript輪播圖實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
HTML頁面定時(shí)跳轉(zhuǎn)方法解析（2種任選）
本文主要對(duì)HTML頁面定時(shí)跳轉(zhuǎn)進(jìn)行方法介紹：1、meta refresh 實(shí)現(xiàn)。2、JavaScript 實(shí)現(xiàn)。具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
利用js實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求限制請(qǐng)求數(shù)量的示例代碼
這篇文章主要介紹了利用js實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求限制請(qǐng)求數(shù)量的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
用js實(shí)現(xiàn)的客戶端即可實(shí)現(xiàn)md5值的代碼，一般情況下都是后臺(tái)語言才有的，客戶端也有了，方便有需要的朋友了。2011-02-02
JS控制CSS樣式,首先得確定一點(diǎn),CSS與HTML頁面的鏈接方式,因?yàn)镃SS有3種與HTML頁面結(jié)合的方式,不同的方式也會(huì)產(chǎn)生不同的結(jié)果.2009-08-08
JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的DOM插入節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了javascript針對(duì)頁面dom元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單的js表格操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
關(guān)于VSCode格式化JS自動(dòng)添加或去掉分號(hào)的問題
這篇文章主要介紹了VSCode格式化JS自動(dòng)添加或去掉分號(hào)的問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
下面小編就為大家分享一篇解決js ajax同步請(qǐng)求造成瀏覽器假死的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01