touchend “點(diǎn)透”了... 慎用touch

今天在做游戲接入的時(shí)候,點(diǎn)擊一個(gè)按鈕,會(huì)出現(xiàn)一個(gè)組件立刻浮在這個(gè)按鈕上面,但是這個(gè)組件上的同一位置的按鈕也被觸發(fā)了。這和之前用zepto做web app的時(shí)候點(diǎn)透了的情況是一樣的(他的最新版已經(jīng)修復(fù)了)。那時(shí)候使用的是zepto封裝的tap事件。他是將touchstart綁定在了body上。
原因:在我們使用touchstart或者是touchend的時(shí)候,被監(jiān)聽(tīng)的元素會(huì)被觸發(fā),這個(gè)是很快的,于是浮層出現(xiàn)了,但是用戶(hù)的手指的點(diǎn)觸和離開(kāi)過(guò)程會(huì)觸發(fā)click事件,click事件是有延遲的,于是在浮層出現(xiàn)后,浮層上的同一位置的按鈕原先綁定了click事件監(jiān)聽(tīng),click事件在這里產(chǎn)生,滿(mǎn)足了click事件觸發(fā)條件(根據(jù)click事件的規(guī)則,只有在被觸發(fā)時(shí),當(dāng)前有click事件的元素顯示,且在面朝用戶(hù)的最前端時(shí),才觸發(fā)click事件 來(lái)源http://blog.youyo.name/archives/zepto-tap-click-through-research.html )所以點(diǎn)擊事件的監(jiān)聽(tīng)函數(shù)就被觸發(fā)了。
要規(guī)避這個(gè)問(wèn)題:
1,完全使用click(追求速度可以配合 fastclick)
2,完全使用touch(不過(guò)有時(shí)候這東西全用,我感覺(jué)不靠譜呢)
3,在touch事件發(fā)生到的元素A的上下方如果隨即出現(xiàn)了B,那么不要給B綁定click事件。
4,給上面所說(shuō)的A綁定click事件。

最后編輯于
?著作權(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)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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