By

移动端H5点击有300ms延迟，该如何解决

背景：早期手机端查看页面有双击放大的效果。区分是 click 点击，还是要双击放大。

初期解决方案：FastClick

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

FastClick 原理

  • 监听 touchend 事件（touchstart touchend 会先于 click 触发）
  • 使用 自定义DOM事件 模拟一个 click 事件
  • 把默认的 click 事件（300ms之后触发）禁止掉

现代浏览器的改进

width=device-width 有这个属性的手机端就不会出现 300ms 的延迟

<head>
  <meta name="viewport" content="width=device-width,initial-scal=1.0">
</head>