移动端事件梳理
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,然后 通过 eventTarget.dispatchEvent 触发对应目标元素上绑定的 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事件对象
- touches 屏幕上
- targetTouches 对象上
- changeTouches 引发事件
document.addEvenetListener('touchstart', e => {
var x = e.targetTouches[0].pageX
});
// touchstart,touchmove: e.targetTouches[0]
// touchend: e.changedTouches[0]
参考文章:
2019 再聊移动端 300ms 延迟及 fastClick 原理解析
也来说说touch事件与点击穿透问题