移动端 300ms 延迟的原因

[powerdong]

移动浏览器 会在 touchend 和 click 事件之间，等待 300 - 350 ms，判断用户是否会进行双击手势用以缩放文字。

禁用缩放

• Chrome on Android (all versions)
• iOS 9.3

<meta name="viewport" content="user-scalable=no" />

或者

html {
  touch-action: manipulation;
}

• IE on Windows Phone

html {
  touch-action: manipulation; // IE11+
  -ms-touch-action: manipulation; // IE10
}

• 不禁用缩放

• Chrome 32+ on Android

• iOS 9.3

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

经测试，如果不添加 width=device-width 不管是 Android 还是 iOS 在已修复的版本中仍然会出现延时的问题。

FastClick 原理

原理

移动端，当用户点击屏幕时，会依次触发 touchstart，touchmove(0 次或多次)，touchend，mousemove，mousedown，mouseup，click。 touchmove。只有当手指在屏幕发生移动的时候才会触发 touchmove 事件。在 touchstart，touchmove 或者 touchend 事件中的任意一个调用 event.preventDefault，mouse 事件 以及 click 事件将不会触发。

fastClick 在 touchend 阶段 调用 event.preventDefault，然后通过 document.createEvent 创建一个 MouseEvents，然后 通过 event​Target​.dispatch​Event 触发对应目标元素上绑定的 click 事件。