移動端父元素綁定touch事件,子元素綁定click事件

一、問題描述
碰到一個非常頭疼的問題,為了做一個滑動效果,給li標(biāo)簽綁定了touch事件?;瑒又?,li標(biāo)簽的末尾會出現(xiàn)一個刪除按鈕,然后點擊該刪除按鈕,刪除整個li標(biāo)簽。
看起來沒什么問題吧,實際上暗藏殺機啊。給刪除按鈕綁定點擊事件的時候,并沒有執(zhí)行點擊事件,而是先執(zhí)行了父元素,也就是li標(biāo)簽的touch事件。
那怎么解決呢?
最開始想到的是,click事件應(yīng)該設(shè)置成冒泡階段執(zhí)行,在設(shè)置個阻止冒泡,這樣不就不會觸發(fā)父元素的touch事件了。貌似很有道理。試了試,然并卵。
再分析,點擊的時候,首先執(zhí)行的就是touch事件,并不是冒泡階段才執(zhí)行的。也就是說我在點擊刪除按鈕的時候必須把父元素的touch事件給禁止掉。
怎么解決?
二、解決方法
(1)方案一:
最簡單的方法,把刪除按鈕寫在li標(biāo)簽的外面。這樣li標(biāo)簽就不是刪除按鈕的父元素了。點擊刪除按鈕的時候就不會觸發(fā)li標(biāo)簽的touch事件了。
這個方案跟本文的主題不是很符合對不對,沒有解決核心問題。好,還有方案二。
(2)方案二:
在父元素的touch事件中進行判斷,如果觸發(fā)父元素的事件源是刪除按鈕的時候,父元素的touch事件就不執(zhí)行。
思路有了,怎么寫代碼呢。
e.target有沒有想到,通過判斷這個就可以實現(xiàn)上面的思路了。
代碼如下:

deletes.forEach(function(v,i){
    if(v == e.target){
        flag = 1;
    }
})
if(flag){
    flag = 0 ;
    return;
}

deletes為多有的刪除按鈕。把這段代碼放到touchstart,touchmove,touchend事件中去。這樣就可以阻止touch事件的執(zhí)行了。而綁定在delete按鈕上的click事件可以順利執(zhí)行

原文鏈接:https://www.cnblogs.com/justinwxt/p/7121611.html

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

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