chrome passive event listener 报错

大家好，欢迎来到IT知识分享网。

错误信息：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端报这个错误。不过测试过程中，还有其他不确定问题，不建议用。