移動(dòng)端點(diǎn)擊延遲事件?

1.?移動(dòng)端瀏覽器在派發(fā)點(diǎn)擊事件的時(shí)候，通常會(huì)出現(xiàn)300ms左右的延遲

2.?原因: 移動(dòng)端的雙擊會(huì)縮放導(dǎo)致click判斷延遲

解決方式

1. 禁用縮放

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

? ? 缺點(diǎn): 網(wǎng)頁(yè)無(wú)法縮放

2.?更改默認(rèn)視口寬度

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

? ??缺點(diǎn): 需要瀏覽器的支持

3.?css touch-action

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

? ? 缺點(diǎn): 新屬性，可能存在瀏覽器兼容問(wèn)題

4.?tap事件

? ??zepto的tap事件, 利用touchstart和touchend來(lái)模擬click事件

? ??缺點(diǎn): 點(diǎn)擊穿透

5.?fastclick

? ??原理: 在檢測(cè)到touchend事件的時(shí)候，會(huì)通過(guò)DOM自定義事件立即出發(fā)模擬一個(gè)click事件，并把瀏覽器在300ms之后真正的click事件阻止掉

? ??缺點(diǎn): 腳本相對(duì)較大

????使用:

? ? ```JS

????// 引入

? ?<script type='application/javascript' src='/path/to/fastclick.js'></script>

? ? // 使用了jquery的時(shí)候

? ? $(function() {

? ? ? ? FastClick.attach(document.body);

? ? });

? ? // 沒(méi)使用jquery的時(shí)候

? ? 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);

? ? ```

* 注:　本文章僅供參考