移动端点击延迟解决方案

标签： 移动端

方案一：viewport

浏览器检测到这个标签,会认为这是一个已经对移动端做了良好适配的页面,会禁用双击缩放.也就不存在点击延迟问题.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

方案二：touch-action

CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。

html {
  touch-action: manipulation;
}

manipulation: 浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。 这是“pan-x pan-y pinch-zoom”（为了兼容性本身仍然有效）的别名

详见MDN - touch-action

至于点击穿透，把隐藏操作放在异步回调里,保证这个操作在元素派发click之后执行就完全可以避免点透.

<!-- box定位在链接上方 -->
<div class="box" ontouchend="setTimeout(()=>{this.style.display='none'})">
</div>
<a href="http://www.baidu.com">百度一下,你就知道</a>

事件触发的顺序：
虽然触摸和鼠标事件的特定顺序是根据实际情况而定的，但标准表明事件执行顺序是固定的：对于单个输入：

• touchstart
• Zero or more touchmove events, depending on movement of the finger(s)
• touchend
• mousemove
• mousedown
• mouseup

• click
  如果 touchstart, touchmove 或者 touchend 在触摸的过程中触发了touchcancel事件，后面的鼠标事件将不会被触发，由此产生的事件序列只是:

• touchstart
• Zero or more touchmove events, depending on movement of the finger(s)

• touchend

参见MDN - Touch events

方案三：FastClick

FastClick 在检测到 touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的 click事件阻止掉。

FastClick 的 github 说明

Note: As of late 2015 most mobile browsers - notably Chrome and Safari - no longer have a 300ms touch delay, so fastclick offers no benefit on newer browsers, and risks introducing bugs into your application. Consider carefully whether you really need to use it.

When it isn‘t needed
FastClick doesn‘t attach any listeners on desktop browsers.

Chrome 32+ on Android with width=device-width in the viewport meta tag doesn‘t have a 300ms delay, therefore listeners aren‘t attached.

<meta name="viewport" content="width=device-width, initial-scale=1">

Same goes for Chrome on Android (all versions) with user-scalable=no in the viewport meta tag. But be aware that user-scalable=no also disables pinch zooming, which may be an accessibility concern.

For IE11+, you can use touch-action: manipulation; to disable double-tap-to-zoom on certain elements (like links and buttons). For IE10 use -ms-touch-action: manipulation.

github - FastClick