国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

聊聊click延遲和點擊穿透

isaced / 762人閱讀

摘要：移動端事件被延遲移動端的開發經常需要監聽用戶的雙擊行為，所以在事件之后會有左右的延遲，用來判斷是否有雙擊事件。但需要注意的是，事件并不是點擊穿透在我們常見的彈出層這種情況下，點擊關閉彈出層時可能會發生穿透現象。這就是點擊穿透事件。

移動端click事件被延遲

移動端的開發經常需要監聽用戶的雙擊行為，所以在touchend事件之后會有300ms左右的延遲，用來判斷是否有雙擊事件。

因為這種延遲，所以我們在移動端通常不監聽click事件。

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

tap事件

zepto這個庫解決click延遲的思路是：自定義tap事件，當用戶點擊元素時，touchend事件會先于click發生，當touchend冒泡到document時觸發目標元素的tap事件
所以我們可以通過監聽tap事件代替監聽click事件。
但需要注意的是，tap事件并不是

點擊穿透

在我們常見的彈出層這種情況下，點擊關閉彈出層時可能會發生穿透現象。
那為什么會出現點擊穿透這種現象呢

因為當tap事件發生時，上層遮罩層關閉，此時事件只進行到了touchend,而click大約在300ms后才觸發，當click觸發時，上面的遮罩層已經消失，這就相當于點擊了到了下層的元素

如果這個元素綁定了click事件，或者有默認的點擊行為，比如a標簽和input等等，那么就會觸發他們的click行為。
這就是點擊穿透事件。

如何解決點擊穿透

1.直接將上層的tap事件換成click
代價就是有300ms的延遲，但畢竟這個按鈕用戶也就關閉時點一下，所以影響不大

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

3.使用css3的一個新特性：pointer-events
pointer-events:none 可以徹底屏蔽鼠標事件，所以可以給點擊按鈕這個屬性，然后就可以放心大膽地使用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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91854.html

相關文章

  • Vue.js 移動端 Web App 點擊穿透問題解決方案

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

    wums 評論0 收藏0

  • 移動端點擊事件全攻略，這里的坑你知多少？

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

    Nosee 評論0 收藏0

  • 移動端點擊事件全攻略，這里的坑你知多少？

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

    microelec 評論0 收藏0

  • 移動端點擊事件全攻略，這里的坑你知多少？

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

    Achilles 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<