移動端300ms點擊延遲

產生原因:手機使用了300ms的延遲來判定用戶是否發生雙擊行爲。

 

解決問題:

1.禁用縮放

 

表明這個頁面是不可縮放的,此時瀏覽器可以禁用默認的雙擊縮放行爲並且去掉300ms的點擊延遲。

缺點:這樣會完全禁用縮放功能。

 

2.更改默認的可視寬度

設置了上述meta標籤,那瀏覽器就可以認爲該網站已經對移動端做過了適配和優化,就無需雙擊縮放操作了。
它沒有完全禁用縮放,而只是禁用了瀏覽器默認的雙擊縮放行爲,但用戶仍然可以通過雙指縮放操作來縮放頁面。

 

3.css touch-action

 touch-action這個CSS屬性。這個屬性指定了相應元素上能夠觸發的用戶代理(也就是瀏覽器)的默認行爲。如果將該屬性值設置爲touch-action: none,那麼表示在該元素上的操作不會觸發用戶代理的任何默認行爲,就無需進行300ms的延遲判斷。

 

4. FastClick

FastClick 是 FT Labs 專門爲解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。FastClick的實現原理是在檢測到touchend事件的時候,會通過DOM自定義事件立即出發模擬一個click事件,並把瀏覽器在300ms之後的click事件阻止掉。

 

Vue的解決方法

安裝  fastclick 插件

 

main.js 中引入

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章