移动端H5 click 有300ms 延迟 如何解决?

257 阅读1分钟

产生背景

手机较小,需要双击放大看 image.png

解决方案

初期解决方案:FastClcik

image.png

fast click 原理

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

现代浏览器的改进(只要有这个属性则不会有300ms延迟)

image.png

答案

  • 背景:double tap to zoom
  • fastclick
  • width=device-width