浏览器告警提示:Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider markin...

超烦有没有，触发一次事件它就提示一次，洁癖的我今天就告诉你们怎么处理掉这个问题。

问题：

vue3项目中使用Element-Plus的表单form校验单的时候，浏览器出现以下警告：

[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. 
Consider marking event handler as ‘passive’ to make the page more responsive.

我个人不喜欢控制台有任何告警和报错，所以有我一定要解决。尽管告警不会直接影响项目运行出现报错 ，但是这系列警告的存在就会为以后项目运行出现未知问题埋下隐患。

解决方案：

原因：项目没有添加事件管理者’passive’，而在谷歌浏览器里面 Chrome51 版本以后，Chrome 增加了新的事件捕获机制Passive Event Listeners ，当前仅支持mousewheel/touch相关事件，目前Chrome主要利用该特性来优化页面的滑动性能。所以这里的解决方案是：安装default-passive-events插件。

安装插件

npm install default-passive-events -S 

在main.js引入

import 'default-passive-events'

就这简单两步，让你的浏览器console干净一新。