[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.-qaq卟言的个人博客

【 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. 】

qaq卟言2021-02-06 22:40:42 JavaScript Html

开始

1.png
最近编写js时候发现控制台报错[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. 暂时忽略第一个错误
第一个错误在这里[Violation] Avoid using document.write(). <URL>
翻译一下
违反：没有添加被动事件监听器来阻止touchstart事件，请考虑添加事件管理者passive，以使页面更加流畅
解释一下
Passive Event Listeners就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为
以便浏览器根据这个信息更好地做出决策来优化页面性能
当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为
Chrome浏览器称这类型的监听器为被动passive监听器
目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners
特性当前仅支持mousewheel/touch相关事件
我在网上看见的解决方法基本上都是加入
```
@mouseleave.passive="leave"
```
如果不行就安装
```
npm i default-passive-events -S
```
然后在js中加入
```
import 'default-passive-events'
```
就可以解决了，但是我的站点根本没有使用npm，后面查看报错代码位置
有一个!1所以发生了报错，后面在外国佬的一篇文章下找到了解决方法
2.png
3.png
其实只需要把!1更改为{passive:true}
运行发现这个警告没有了
4.png
哦几把卡，完美解决

完结

🔖本文来源：qaq卟言的个人博客网站声明如损害你的权益请联系我们

⚠️部分文章图片来自网络，可能存在版权问题。如发现相关争议请联系qaq卟言处理！

🔗

⏲

【 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. 】