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

解决方案

  • 禁用缩放，设置meta标签 user-scalable=no
  • 现在浏览器方案 meta中设置content="width=device-width"
  • fastclick.js

初期解决方案 fastClick

    // 使用
    window.addEventListener('load',()=>{
      FastClick.attach(document.body)
    },false)

fastClick原理

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

触摸事件的响应顺序

  • ontouchstart
  • ontouchmove
  • ontouchend
  • onclick

现代浏览器的改进

meta中设置content="width=device-width" 就不会有300ms的点击延迟了。浏览器认为你要在移动端做响应式布局，所以就禁止掉了

    <head>
      <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    </head>
Last Updated:
Contributors: leeguooooo