成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

聊聊click延遲和點(diǎn)擊穿透

isaced / 815人閱讀

摘要：移動(dòng)端事件被延遲移動(dòng)端的開(kāi)發(fā)經(jīng)常需要監(jiān)聽(tīng)用戶的雙擊行為，所以在事件之后會(huì)有左右的延遲，用來(lái)判斷是否有雙擊事件。但需要注意的是，事件并不是點(diǎn)擊穿透在我們常見(jiàn)的彈出層這種情況下，點(diǎn)擊關(guān)閉彈出層時(shí)可能會(huì)發(fā)生穿透現(xiàn)象。這就是點(diǎn)擊穿透事件。

移動(dòng)端click事件被延遲

移動(dòng)端的開(kāi)發(fā)經(jīng)常需要監(jiān)聽(tīng)用戶的雙擊行為，所以在touchend事件之后會(huì)有300ms左右的延遲，用來(lái)判斷是否有雙擊事件。

因?yàn)檫@種延遲，所以我們?cè)谝苿?dòng)端通常不監(jiān)聽(tīng)click事件。

移動(dòng)端的事件的發(fā)生順序是這樣的：touchstart---touchmove---touchend,然后大約過(guò)300ms觸發(fā)click事件

tap事件

zepto這個(gè)庫(kù)解決click延遲的思路是：自定義tap事件，當(dāng)用戶點(diǎn)擊元素時(shí)，touchend事件會(huì)先于click發(fā)生，當(dāng)touchend冒泡到document時(shí)觸發(fā)目標(biāo)元素的tap事件
所以我們可以通過(guò)監(jiān)聽(tīng)tap事件代替監(jiān)聽(tīng)click事件。
但需要注意的是，tap事件并不是

點(diǎn)擊穿透

在我們常見(jiàn)的彈出層這種情況下，點(diǎn)擊關(guān)閉彈出層時(shí)可能會(huì)發(fā)生穿透現(xiàn)象。
那為什么會(huì)出現(xiàn)點(diǎn)擊穿透這種現(xiàn)象呢

因?yàn)楫?dāng)tap事件發(fā)生時(shí)，上層遮罩層關(guān)閉，此時(shí)事件只進(jìn)行到了touchend,而click大約在300ms后才觸發(fā)，當(dāng)click觸發(fā)時(shí)，上面的遮罩層已經(jīng)消失，這就相當(dāng)于點(diǎn)擊了到了下層的元素

如果這個(gè)元素綁定了click事件，或者有默認(rèn)的點(diǎn)擊行為，比如a標(biāo)簽和input等等，那么就會(huì)觸發(fā)他們的click行為。
這就是點(diǎn)擊穿透事件。

如何解決點(diǎn)擊穿透

1.直接將上層的tap事件換成click
代價(jià)就是有300ms的延遲，但畢竟這個(gè)按鈕用戶也就關(guān)閉時(shí)點(diǎn)一下，所以影響不大

2.在click事件發(fā)生前阻止它
具體做法是在touchend的事件處理函數(shù)中使用e.preventDefault()來(lái)阻止后續(xù)的click事件。

3.使用css3的一個(gè)新特性：pointer-events
pointer-events:none 可以徹底屏蔽鼠標(biāo)事件，所以可以給點(diǎn)擊按鈕這個(gè)屬性，然后就可以放心大膽地使用tap事件或者touchend啦

參考文章：

http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

https://segmentfault.com/a/1190000003848737

https://github.com/mattt/MsgPackSerialization/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AFclick%E5%BB%B6%E8%BF%9F%E5%8F%8Azepto%E7%9A%84%E7%A9%BF%E9%80%8F%E7%8E%B0%E8%B1%A1

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91854.html

相關(guān)文章

  • Vue.js 移動(dòng)端 Web App 點(diǎn)擊穿透問(wèn)題解決方案

    摘要：參考博文也來(lái)說(shuō)說(shuō)事件與點(diǎn)擊穿透問(wèn)題移動(dòng)頁(yè)面點(diǎn)擊穿透問(wèn)題解決方案點(diǎn)擊穿透原理及解決書(shū)籍移動(dòng)手冊(cè)以上部分資料搜集整理自網(wǎng)絡(luò)，如有不對(duì)的地方希望及時(shí)告知，歡迎大家批評(píng)指正，謝謝 描述 在近期的一個(gè)移動(dòng)端項(xiàng)目中，有一個(gè)頁(yè)面需要有彈框提示，并且這個(gè)彈框通過(guò)關(guān)閉按鈕關(guān)閉。頁(yè)面當(dāng)中使用了 iScroll 來(lái)實(shí)現(xiàn)頁(yè)面局部滾動(dòng)，在 iScroll 的配置當(dāng)中把 tap 和 click 事件都開(kāi)啟了。代碼...

    wums 評(píng)論0 收藏0

  • 移動(dòng)端點(diǎn)擊事件全攻略，這里的坑你知多少？

    摘要：所以這種情況下是不符合點(diǎn)擊事件的定義的。，關(guān)于移動(dòng)端的點(diǎn)擊事件總結(jié)完了，可能你都沒(méi)想到一個(gè)簡(jiǎn)單的點(diǎn)擊事件會(huì)有那么多坑，如果你在工作中可能會(huì)涉及到移動(dòng)端開(kāi)發(fā)的話，相信這篇文章還是值得你點(diǎn)贊和收藏的，畢竟是踩了那么多坑的經(jīng)驗(yàn)總結(jié)。 看標(biāo)題的時(shí)候你可能會(huì)想，點(diǎn)擊事件有什么好說(shuō)的，還寫(xiě)一篇攻略？哈哈，如果你這么想，只能說(shuō)明你too young to simple. 接觸過(guò)移動(dòng)端開(kāi)發(fā)的同學(xué)可能都...

    Nosee 評(píng)論0 收藏0

  • 移動(dòng)端點(diǎn)擊事件全攻略，這里的坑你知多少？

    摘要：所以這種情況下是不符合點(diǎn)擊事件的定義的。，關(guān)于移動(dòng)端的點(diǎn)擊事件總結(jié)完了，可能你都沒(méi)想到一個(gè)簡(jiǎn)單的點(diǎn)擊事件會(huì)有那么多坑，如果你在工作中可能會(huì)涉及到移動(dòng)端開(kāi)發(fā)的話，相信這篇文章還是值得你點(diǎn)贊和收藏的，畢竟是踩了那么多坑的經(jīng)驗(yàn)總結(jié)。 看標(biāo)題的時(shí)候你可能會(huì)想，點(diǎn)擊事件有什么好說(shuō)的，還寫(xiě)一篇攻略？哈哈，如果你這么想，只能說(shuō)明你too young to simple. 接觸過(guò)移動(dòng)端開(kāi)發(fā)的同學(xué)可能都...

    microelec 評(píng)論0 收藏0

  • 移動(dòng)端點(diǎn)擊事件全攻略，這里的坑你知多少？

    摘要：所以這種情況下是不符合點(diǎn)擊事件的定義的。，關(guān)于移動(dòng)端的點(diǎn)擊事件總結(jié)完了，可能你都沒(méi)想到一個(gè)簡(jiǎn)單的點(diǎn)擊事件會(huì)有那么多坑，如果你在工作中可能會(huì)涉及到移動(dòng)端開(kāi)發(fā)的話，相信這篇文章還是值得你點(diǎn)贊和收藏的，畢竟是踩了那么多坑的經(jīng)驗(yàn)總結(jié)。 看標(biāo)題的時(shí)候你可能會(huì)想，點(diǎn)擊事件有什么好說(shuō)的，還寫(xiě)一篇攻略？哈哈，如果你這么想，只能說(shuō)明你too young to simple. 接觸過(guò)移動(dòng)端開(kāi)發(fā)的同學(xué)可能都...

    Achilles 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<