移动端 click 300ms 延迟，如何解决

Posted 2022-05-23 沿着路走到底

背景

智能手机开始流行的前期，浏览器可以点击缩放（double tap to zoom）网页。这样在手机上就可以浏览 PC 网页

浏览器为了分辨 click 还是“点击缩放”，就强行把 click 时间延迟 300ms 触发。

初期解决方案

[FastClick](https://www.npmjs.com/package/fastclick) 专门用于解决这个问题。

// FastClick 使用非常简单
window.addEventListener( "load", function() 
    FastClick.attach( document.body )
, false )

它的内部原理是

- 监听 `touchend` 事件 （`touchstart` `touchend` 会先于 `click` 事件被触发）

- 通过 [DOM 自定义事件](https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent) 模拟一个 click 事件

- 把 300ms 之后触发的 click 事件阻止掉

现代浏览器的改进

- Chrome 32+ on android

- ios 9.3

<meta name="viewport" content="width=device-width" />

有这个属性：width=device-width，浏览器就不会再有 300毫秒的延迟

Ret