移動端點擊延遲事件?

1.?移動端瀏覽器在派發點擊事件的時候，通常會出現300ms左右的延遲

2.?原因: 移動端的雙擊會縮放導致click判斷延遲

fastclick 是具有消除移動端瀏覽器上的點擊事件的 300ms 的延遲的作用。

注意幾點

1、PC端無效

2、Android 上的 Chrome 32+ 瀏覽器，如果在?viewport meta tag?中添加了?width=device-width，那么就不會有 300ms 的延遲，所以，FastClick 監聽器就不會被附加。

3、如果在 viewport meta tag 添加了?user-scalable=no，也不會有延遲。

---

解決方式

1. 禁用縮放

? ?`<meta name = "viewport" content="user-scalable=no" > `

? ? 缺點: 網頁無法縮放

2.?更改默認視口寬度

? ? `<meta name="viewport" content="width=device-width">`

? ??缺點: 需要瀏覽器的支持

3.?css touch-action

? ??touch-action的默為 auto，將其置為 none 即可移除目標元素的 300 毫秒延遲

? ? 缺點: 新屬性，可能存在瀏覽器兼容問題

4.?tap事件

? ??zepto的tap事件, 利用touchstart和touchend來模擬click事件

? ??缺點: 點擊穿透

5.?fastclick

? ??原理: 在檢測到touchend事件的時候，會通過DOM自定義事件立即出發模擬一個click事件，并把瀏覽器在300ms之后真正的click事件阻止掉

? ??缺點: 腳本相對較大

????使用:

// 引入<script type='application/javascript' src='/path/to/fastclick.js'></script>// 使用了jquery的時候$(function() {FastClick.attach(document.body);});// 沒使用jquery的時候if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}

在vue中使用

// 安裝npm install fastclick -S// 引入import FastClick from 'fastclick'// 使用FastClick.attach(document.body);

?

總結

以上是生活随笔為你收集整理的fastclick库的介绍和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。