移動端點擊延遲事件
1. 移動端瀏覽器在派發點擊事件的時候,通常會出現300ms左右的延遲
2. 原因: 移動端的雙擊會縮放導致click判斷延遲
解決方式
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事件阻止掉
缺點: 腳本相對較大
使用:
```JS
// 引入
<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中使用
```js
// 安裝
npm install fastclick -S
// 引入
import FastClick from 'fastclick'
// 使用
FastClick.attach(document.body);
```
參考鏈接:https://www.jianshu.com/p/67bae6dfca90