chrome passive event listener 报错

最新推荐文章于 2025-06-28 09:19:42 发布

userkang

最新推荐文章于 2025-06-28 09:19:42 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：问题文章标签： chrome passive 报错

本文链接：https://blog.youkuaiyun.com/userkang/article/details/80857870

问题专栏收录该内容

14 篇文章

订阅专栏

针对Chrome56更新后，默认将touchstart和touchmove事件设为passive:true的问题，本文介绍了三种解决方案，包括设置passive:false、使用CSS touch-action属性及自定义事件监听器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误信息：Unable to preventDefault inside passive event listener due to target being treated as passive.

是时候 google 了。

在 chrome 56 版本的更新日志中又这样一段话。

AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored)..
If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page.
This is behind a flag starting in Chrome 54, and enabled by default in Chrome 56. See
https://developers.google.com/web/updates/2017/01/scrolling-intervention

又看到 google 曾发过这样几篇博客。（需要翻墙）
passive-event-listeners
scrolling-intervention

经过一番折腾，大概知道了为什么。（看博客下的评论，程序员们对这一改动一片“叫好“，呵呵～）

google 这一改动是为了移动端滚动更加流畅，在 chrome 56 版本之后，对 touchstart 和 touchmove 事件处理函数，会默认设为 passive: true。因此默认也会忽略 preventDefault() 的调用。

也就是这样：

window.addEventListener('touchmove', func) 
window.addEventListener('touchmove', func, { passive: true }) // 默认为 true，等同上句

那么知道导致问题的原因，怎么解决呢？

1、方案一：

window.addEventListener('touchmove', func, { passive: false }) // 取消被动模式

2、方案二：

body {
    touch-action: none
}

通过这个可以防止触发默认事件，同时touch相关事件还能保持有效。

3、方案三：

document.body.addEventListener('touchmove', function(e) {
    // 判断默认事件是否可以禁止
    if (e.canelable) {
        e.preventDefault();
    }
})

第三种方案，pc端和移动端表现不一致，刚好可以避免pc端报这个错误。不过测试过程中，还有其他不确定问题，不建议用。