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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM