阻止默認(rèn)事件

話不多說(shuō)直接放源碼,沒(méi)錯(cuò),就是網(wǎng)上隨便一搜就出來(lái)的這個(gè)!
js代碼:

function cancelBubble(e) { 
    var evt = e ? e : window.event; 
        if (evt.stopPropagation) {        //W3C 
           evt.stopPropagation(); 
        }else {       //IE      
           evt.cancelBubble = true; 
        }  
}

為什么很多人試了都說(shuō)沒(méi)用呢?
事實(shí)上很多同學(xué)喜歡使用這種方式綁定事件

HTML:
<div onclick="test(this)"></div>
JS:
function test(oo){
    //事件處理
}

其實(shí)無(wú)論是哪種方法,傳值都是很難避免的
這也就是這個(gè)方法的局限性
它在這里調(diào)用時(shí),因?yàn)閠est函數(shù)已經(jīng)傳了值,那么我們的e就進(jìn)不來(lái)
這也就造成了調(diào)用了沒(méi)反應(yīng)的問(wèn)題
調(diào)用方法:
在綁定事件的位置,調(diào)用cancelBubble()即可,像這樣:

HTML:
<div class="test" onclick="test()"></div>
JS:
function test(){
    cancelBubble()
    //事件處理
}
//或者這樣
$(".test").click(function(){
    cancelBubble()
    //事件處理
})
//或者這樣
$(".test")[0].addEventListener("click",function(){
    cancelBubble()
    //這樣寫(xiě)似乎可以解決傳值的e的問(wèn)題,因?yàn)閍dd原生方法是異步添加,可相應(yīng)多個(gè)click事件
    // 但是如果頁(yè)面是動(dòng)態(tài)添加的元素,需要重復(fù)綁定事件的問(wèn)題仍然頭疼
})

若需要兼容火狐,在調(diào)用該函數(shù)時(shí),如果是在一個(gè)函數(shù)內(nèi)部調(diào)用該函數(shù),那么外部的函數(shù)不可傳值進(jìn)來(lái)
也就是說(shuō),盡量單獨(dú)調(diào)用
emmmm最近才發(fā)現(xiàn)一件事情
事實(shí)上jq的on函數(shù)可以重復(fù)綁定相同事件
也就是說(shuō)

$(oo).on('click',function(){
    console.log(1)
})
$(oo).on('click',function(){
    console.log(2)
})

在控制臺(tái)打印時(shí),會(huì)輸出1和2 ,而不是只輸出2

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容