1. 300ms延遲的產(chǎn)生緣由

移動(dòng)端瀏覽器的默認(rèn)顯示寬度是980px(不同機(jī)型各異，但相差不大)，而不是屏幕的寬度(320px或其他)。為了對(duì)早期普通網(wǎng)頁(yè)更好的體驗(yàn)，iphone設(shè)計(jì)了雙擊放大顯示的功能–這就是300ms延遲的來(lái)源：如果用戶(hù)一次點(diǎn)擊后300ms內(nèi)沒(méi)有其他操作，則認(rèn)為是個(gè)單擊行為；否則為雙擊放大行為

2. 解決方法

1.設(shè)置不能縮放：user-scalable=no。 不能縮放就不會(huì)有雙擊縮放操作，因此click事件也就沒(méi)了300ms延遲，這個(gè)是Chrome首先在Android中提出的。

2.設(shè)置顯示寬度：width=device-width。Chrome 開(kāi)發(fā)團(tuán)隊(duì)不久前宣布，在 Chrome 32 這一版中，他們將在包含 width=device-width 或者置為比 viewport 值更小的頁(yè)面上禁用雙擊縮放。當(dāng)然，沒(méi)有雙擊縮放就沒(méi)有 300
毫秒點(diǎn)擊延遲。

3.IE的指針事件 (Pointer Events)：設(shè)置touch-action:none，根據(jù)規(guī)范，touch-action 屬性決定 “是否觸摸操作會(huì)觸發(fā)用戶(hù)代理的默認(rèn)行為。這包括但不限于雙指縮放等行為”。
從實(shí)際應(yīng)用的角度來(lái)看，touch-action決定了用戶(hù)在點(diǎn)擊了目標(biāo)元素之后，是否能夠進(jìn)行雙指縮放或者雙擊縮放。因此，這也相當(dāng)完美地解決了
300 毫秒點(diǎn)擊延遲的問(wèn)題。

鑒于上述的3種解決方案，現(xiàn)在較為通用的meta設(shè)置為：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

插件

cnpm install fastclick --save 全局引入 main.js import fastClick from 'fastclick' 配置ok fastClick.attach(document.body)

總結(jié)

以上是生活随笔為你收集整理的移动端Click300毫秒点击延迟 解决办法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。