一. 坑
使用 swiper.js jquerymobile.js better-scroll.js 等移动端js库的时候,不时会看到报错:Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
翻译后:由于目标被视为被动,因此无法防止被动事件侦听器中的默认值。详情查看:https://www.chromestatus.com/features/5093566007214080
二. 原因
当浏览器执行事件处理函数的时候,要检查一下是否进行了默认事件的取消,这就导致了浏览器不能及时响应滚动,略有延迟。google浏览器为了最快速的相应touch,scroll事件,从 chrome56 开始,触摸事件,滑动事件,事件处理函数,会默认 passive: true,忽略 preventDefault()
三. 解决
注册处理函数时,用如下方式,明确声明为不是被动的,如:window.addEventListener('事件', 事件函数, { passive: false })
应用 CSS 属性 touch-action: none; 这样任何触摸,事件都不会产生默认行为,但是 touch 事件照样触发。touch-action 还有很多选项,详细请参考:touch-action