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.

2,323次阅读

共计 1168 个字符，预计需要花费 3 分钟才能阅读完成。

[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，如下所示