移动端事件疑难杂症总结

移动端事件梳理

click事件 300ms延迟

禁用缩放

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

html {
    -ms-touch-action: manipulation;   /* IE10及以下 */
    touch-action: manipulation;
}

适用于：

• Chrome on Android (all versions)
• ios 9.3及以上的浏览器、WKWebview

不禁用缩放

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

适用于：

• Chrome 32+ on Android
• iOS 9.3及以上的浏览器、WKWebview

tap事件替换 zepto

有点透情况

touch/tap点透

tap相当于是冒泡到document上的touchend事件被触发

• 动画过渡或遮挡
• css设置元素不是鼠标事件目标

.innerLayer {
    pointer-events: none;
}

• 都用tap事件，但下层的（input，a等）原生click事件无法阻止
• fastclick
• 不考虑兼容性的话，不存在click延迟

fastclick

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

同时取消原来的click事件。（在 touchstart ，touchmove 或者 touchend 事件中的任意一个调用 event.preventDefault，mouse 事件 以及 click 事件将不会触发。）

• PC 端是没有 touch 事件的因此 window.ontouchstart 返回 undefined，移动端如果没有绑定事件则返回 null。

// Devices that don't support touch don't need FastClick
if (typeof window.ontouchstart === 'undefined') {
  return true;
}

• event.stopPropagation 只会阻止相同类型(event.type 相同)事件传播
• 同一事件类型，如果其中某个监听函数执行 event.stopImmediatePropagation 方法，则当前元素剩下的监听函数将不会被执行。

touch事件的触发顺序

touchstart，touchmove(0 次或多次)，touchend，mousemove，mousedown，mouseup，click

touch事件对象

1. touches 屏幕上
2. targetTouches 对象上
3. changeTouches 引发事件

document.addEvenetListener('touchstart', e => {
    var x = e.targetTouches[0].pageX
});
// touchstart,touchmove: e.targetTouches[0]
// touchend: e.changedTouches[0]

参考文章：
2019 再聊移动端 300ms 延迟及 fastClick 原理解析
也来说说touch事件与点击穿透问题