Unable to preventDefault inside passive event listener due to target being treated as passive. => touch 问题

在使用 fastclick 并且在 chrome上 做 touch 时经常看到控制台信息:

原因:浏览器无法预先知道一个事件处理函数中会不会调用 preventDefault(),需要等到事件处理函数执行完后,才能去执行默认行为,然而事件处理函数执行是要耗时的,这样一来就会导致页面卡顿,也就是说,当浏览器等待执行事件的默认行为时,大部分情况是白等了。

从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动。

所以,注册处理函数时,明确声明为不是被动的

window.addEventListener('touchmove', func, { passive: false }

或者,

 touch-action: none; 

使用以上两种方式解决。

更多详情请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

 

原文地址:https://www.cnblogs.com/amy2017/p/10296286.html