成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

isaced / 771人閱讀

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

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

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

因?yàn)檫@種延遲，所以我們在移動(dòng)端通常不監(jiān)聽click事件。

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

tap事件

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

點(diǎn)擊穿透

在我們常見的彈出層這種情況下，點(diǎn)擊關(guān)閉彈出層時(shí)可能會發(fā)生穿透現(xiàn)象。
那為什么會出現(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等等，那么就會觸發(fā)他們的click行為。
這就是點(diǎn)擊穿透事件。

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

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

2.在click事件發(fā)生前阻止它
具體做法是在touchend的事件處理函數(shù)中使用e.preventDefault()來阻止后續(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91854.html

相關(guān)文章

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

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

    wums 評論0 收藏0

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

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

    Nosee 評論0 收藏0

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

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

    microelec 評論0 收藏0

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

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

    Achilles 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<