Vue3.x 控制台警告 [Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive.

控制台警告信息

[admonition]

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

[/admonition]

情况说明

以下说明引用至https://stackoverflow.com/questions/39152877/consider-marking-event-handler-as-passive-to-make-the-page-more-responsive/62639220

想了解更多关于这个的问题可以点上面链接进去看原文

For those receiving this warning for the first time, it is due to a bleeding edge feature called Passive Event Listeners that has been implemented in browsers fairly recently (summer 2016). From https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:

Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49 and landed in WebKit. For full official explanation read more here.

其实说白了就是个新特性,似乎是用来提高移动端页面滚动效率的?

我也整不太明白,这也不是个错误,只是个警告。

解决方法非常简单,看下面

解决方法

有两种方法,我倾向于第二种

1、在鼠标滚动方法上加上passive,如下所示

@mouseleave.passive="leave"

2、安装扩展,一劳永逸

npm i default-passive-events -S

安装后,在main.js里引入即可

import 'default-passive-events'

 

版权声明:
作者:zjh4473
链接:https://blog.zixutech.cn/?p=701
来源:紫旭Blog
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>