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.

Cejauh 发布于 2022-04-05 4987 次阅读


AI 摘要

在使用 Vue3.x 的开发中,你是否也遭遇过控制台里的“非被动事件监听器”警告?这条警告虽然不是错误,却透露了一项提升用户体验的前沿技术——被动事件监听器。借助这一特性,开发者能显著改善触屏和滚动事件的响应速度。想了解如何简单解决这个小警告并优化你的页面表现吗?继续阅读,掌握快速提升项目性能的方法吧!

控制台警告信息

[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'

 

May we meet again.
最后更新于 2025-05-07