移動端點擊延遲事件?
1.?移動端瀏覽器在派發(fā)點擊事件的時候饺鹃，通常會出現(xiàn)300ms左右的延遲
2.?原因: 移動端的雙擊會縮放導(dǎo)致click判斷延遲
解決方式
1. 禁用縮放
? ?`<meta name = "viewport" content="user-scalable=no" > `
? ? 缺點: 網(wǎng)頁無法縮放
2.?更改默認(rèn)視口寬度
? ? `<meta name="viewport" content="width=device-width">`
? ??缺點: 需要瀏覽器的支持
3.?css touch-action
? ??touch-action的默為 auto莫秆，將其置為 none 即可移除目標(biāo)元素的 300 毫秒延遲
? ? 缺點: 新屬性，可能存在瀏覽器兼容問題
4.?tap事件
? ??zepto的tap事件, 利用touchstart和touchend來模擬click事件
? ??缺點: 點擊穿透
5.?fastclick
? ??原理: 在檢測到touchend事件的時候悔详，會通過DOM自定義事件立即出發(fā)模擬一個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);
? ? ```
* 注: 本文章僅供參考
