解决Unable to preventDefault inside passive event listener invocation 报错问题

最新推荐文章于 2025-09-11 04:48:27 发布

原创最新推荐文章于 2025-09-11 04:48:27 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vscode #echarts

bug日记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决ECharts在Chrome浏览器中触发滚动事件时出现的报错问题。通过两种方法解决：一是直接修改依赖包代码，二是注释掉特定的导入语句。

问题描述：项目里使用echarts滚动事件在chrome里报错 Unable to preventDefault inside passive event listener invocation

目前的解决方法是：

1. node_modules/zrender/lib/events.js文件,修改了其中代码，但这种修改依赖包，对于自动部署的项目没用

2. 把main.js 文件中的 import 'default-passive-events' 注释掉

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

哈哈，你开心就好

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2/3 - Unable to preventDefault inside passive event listener due to target being treated as passi

高级前端工程师

12-26

3157

vue，vue2 3报错解决，vue控制台报错如何解决，vue2报错警告怎么解决，vue3报错，浏览器控制台报错Unable to preventDefault inside passive event listener due to target being treated as passi完美解决方案方法，报错怎么办，报错解决，vue2/3 - Unable to preventDefault inside passive event listener due to target being treat

记录echarts、elementUi、openlayers等组件使用过v中触发 UNABLE TO PREVENTDEFAULT INSIDE PASSIVE EVENT 。。。的问题

weixin_53399156的博客

10-26

556

1、使用Echarts 中的dataZoom，触发鼠标滚动、缩放条拖拽等于组件进行互动的时候，触发UNABLE TO PREVENTDEFAULT INSIDE PASSIVE EVENT LISTENER INVOCATION 错误，原因不解释详细了，就是Chrome更新嘛，加了这个功能 2、解决办法：因为我是个小白，所以不会很深的原理什么的，只是知道这个问题大多数情况下无伤大雅，就是看着恶心，废话不多说。看到截图咩，这个位置点进去，如图显示然后你去根据这个路径去你的nodemoedl文.

3 条评论您还未登录，请先登录后发表或查看评论

Unable to preventDefault inside passive event listener invocation报错

weixin_44846945的博客

11-09

9755

Unable to preventDefault inside passive event listener invocation报错解决方案

解决Element Plus日期选择器滚动卡顿：被动事件监听器优化指南

gitblog_00816的博客

09-11

296

你是否在使用Element Plus日期选择器时遇到过滚动卡顿？特别是在移动端或数据量大的场景下，页面滚动不流畅甚至控制台出现`[Violation] Added non-passive event listener`警告？本文将从问题原因到解决方案，帮你彻底解决这一性能瓶颈。 ## 问题现象与影响范围当用户在包含日期选择器的页面快速滚动时，可能出现以下症状： - 页面滚动不流畅，出现明显卡顿...

报错：Unable to preventDefault inside passive event listener invocation

bingmoujs的博客

04-12

1278

"Unable to preventDefault inside passive event listener invocation"是浏览器开发中的一个警告信息。这个警告通常出现在使用passive事件监听器时，当在事件处理函数中调用preventDefault()方法时会引发该警告，不会实际影响使用，就是控制台一直报红贼难看。1.新建公用文件：browserPatch.js（可以是在common目录或者untils目录，根据自己的项目定）ts转行书写格式同理。

Echarts区域缩放(datazoom)鼠标滚动报错：Unable to preventDefault inside passive event listener invocation(问题篇)

skyblue_afan的博客

05-20

1981

1、解决办法：文件node_modules下，找到zrender文件。在zrender文件中找到event.js文件。具体路径：zrender/lib/core/event.js。找到event.js文件下的addEventListener函数，如下修改标注红色字体部分。代码：el.addEventListener(name,handler,{passive:false}); 2、所遇到的情况： 1、带区域缩放的时间轴。当鼠标在图表上下滚动时，报错：Unable t...

【关于echarts使用所遇问题01】---- Unable to preventDefault inside passive event listener invocation

weixin_43624943的博客

11-19

1688

解决Unable to preventDefault inside passive event listener invocation.报错

qq_39877681的博客

11-29

2144

解决Unable to preventDefault inside passive event listener invocation.报错

Unable to preventDefault inside passive event listener invocation.怎么解决

05-31

"Unable to preventDefault inside passive event listener invocation"是浏览器在处理滚动事件时可能出现的警告信息。在现代浏览器中，为了提高滚动的流畅度，滚动事件默认是被设置为“被动”的(passive)，也就是说...

在缩放echarts图表时控制台出现警告信息Unable to preventDefault inside passive event listener invocation.怎么解决？

06-21

在使用 ECharts 图表时，如果出现警告信息 `Unable to preventDefault inside passive event listener invocation.`，这是由于浏览器的性能优化机制导致的。现代浏览器为了提高滚动性能，默认将事件监听器标记为 `...

el-date-picker 报 Unable to preventDefault inside passive event listener invocation 回答

热门推荐

m0_73481765的博客

10-18

1万+

然而，在passive事件监听器中调用preventDefault()方法是无效的，并且会引发上述警告。而passive事件监听器是一种新的事件处理机制，它允许开发者在事件处理函数执行之前告诉浏览器不要等待事件处理函数执行完毕就可以继续执行默认的操作，这样可以提高页面的响应性能。然而，在某些情况下，忽视这个警告可能会导致意外的行为或性能问题，所以建议开发者根据具体情况选择合适的解决方案。使用事件委托：如果无法直接在Vue组件中解决该警告，可以尝试在父级元素上使用事件委托，并在事件处理函数中调用。

解决Unable to preventDefault inside passive event listener invocation. 报错

m0_59006402的博客

05-08

1458

解决办法：将 main.js中引入的：import 'default-passive-events' 注释掉。这个报错大致说的是阻止默认行为。

Vue使用echart报错“Unable to preventDefault inside passive event listener invocation”

qq_39548550的博客

06-06

4909

今天，2022-06-06，被封了一个月，端午来公司上班第一天。今天在项目中碰到了一个棘手的问题，vue项目中使用echart，使用echart的dataZoom组件进行图表缩放的时候报错，“Unable to preventDefault inside passive event listener invocation”。...

“填坑”之解决Unable to preventDefault inside passive event listener invocation.

m0_46074266的博客

02-06

1万+

Unable to preventDefault inside passive event listener invocation.

谷歌浏览器事件坑：Unable to preventDefault inside passive event listener invocation.

古月水告的博客

03-24

916

从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。插件是解决浏览器告警的，我不想浏览器有告警信息，但加上又使浏览器报错，怎么处呢？，它默认情况下启用某些事件的被动事件侦听器，基本上每次声明新的事件监听器时，都会自动设置。插件导致的，注释了在main.js引入的就没有报错了。1、注册处理函数时，用如下方式，明确声明为不是被动的。，图一时畅快，现在出现问题了。

Unable to preventDefault inside passive event listener invocation警告

Suk__的博客

09-11

605

ant-mobile设置轮播图后左右滑动轮播图会报这个错,找到node_modules源码carousel.js中的第400行注释掉重启项目即可:

Vue3 Unable to preventDefault inside passive event listener invocation.报错解决

lllnana

12-14

1885

本次是因为在使用日期选择el-date-picker中谷歌浏览器中报错，但是又不影响使用，可是强迫症会觉得不舒服，查询了各种解决方案并尝试之后，发现这个方式解决是最好的。这种方案的解决思路是调整事件对象addEventListener的原型，通过该解决方式处理之后，谷歌浏览器不再报警告信息，也不会再引发新的错误。其实不仅仅是这个错误，很多同类型错误都可以使用这个方案解决，比如echar，还有elementPlus中输入框，日期选择，等等。