“填坑”之解决Unable to preventDefault inside passive event listener invocation.

翻译一下：chrome 监听touch类事件报错：无法被动侦听事件preventDefault，是新版本chrome 浏览器报错。
说明：preventDefault()取消默认事件的，如果这个函数起作用的，比如默认的表单提交，a链接的点击跳转，就不好用了。
原因：google浏览器为了最快速的相应touch事件，做出的改变。
历史：当浏览器首先对默认的事件进行响应的时候，要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前有那么一丝丝的耽误时间。
现在：google就决定取消了对这个事件的检查，默认事件就取消了。直接执行滑动操作。这样就更加的顺滑了。但是浏览器的控制台就会进行错误提醒了。

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

// 两句话的效果一样
wnidow.addEventListener('touchmove', func) 
wnidow.addEventListener('touchmove', func, { passive: true })

如何做到即不让控制台提示，而且 preventDefault() 有效果呢？
两个方案：
1、注册处理函数时，用如下方式，明确声明为不是被动的
window.addEventListener(‘touchmove’, func, { passive: false })

2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。touch-action 还有很多选项，

但是如果上述两个方法仍不生效，就检查是否安装了default-passive-events依赖，安装了就卸载然后在main.js中注释掉import default-passive-events，它默认情况下启用某些事件的被动事件侦听器，基本上每次声明新的事件监听器时，都会自动设置{ passive: true }。

default-passive-events插件是用来解决谷歌浏览器消除Passive Event Listeners（被动事件警告）的方法

翻译： 已将非被动事件侦听器添加到滚动阻止'touchstart‘事件中。请考虑将事件处理程序标记为’被动‘，以使页面更具响应性

原因是：Chrome 增加了新的事件捕获机制 Passive Event Listeners（被动事件侦听器），作用是：让页面滑动更加流畅，主要用于提升移动端滑动行为的性能

Passive Event Listeners: 就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动(passive) 监听器。目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。

但是安装default-passive-events是为了解决Chrome51以后的版本警告，进退两难

原文链接：https://blog.csdn.net/lijingshan34/article/details/88350456

原文链接：https://blog.csdn.net/qq_39548550/article/details/125147909