解决echarts滚动条Unable to preventDefault inside passive event listener invocation报错

最新推荐文章于 2023-11-09 10:08:05 发布
原创 最新推荐文章于 2023-11-09 10:08:05 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #javascript #前端

博客讲述了在Echarts图表中使用dataZoom属性时遇到的控制台报错问题，以及尝试通过注释main.js中'import default-passive-events'来解决但未成功的情况。尽管在本地和线上环境运行正常，但在打包后问题依然存在，作者期待有经验的大佬提供帮助。

背景：在echarts图中添加dataZoom属性，在滑动滚动条时控制台报错如下图:

根据报错提示信息我们可以看到以下情况，红色波浪线的地方就是问题所在

解决办法： 把main.js  文件中的  import 'default-passive-events'  注释掉

后续问题：在本地和线上正常运行，但是打包之后还是会出现这个问题，如果有大佬知道这个问题可以留言，感激不尽！

echarts图表滚动条带动页面窗口滚动条的问题
没有伞的孩子只能快跑，如若不跑，只有一个结果：超过你的人回头鄙视你
11-29 1093
结果我们在这个事件监听中调用了event.preventDefault()，浏览器就不高兴了，报错，告诉你：“你定义的事件不是一个被动事件监听吗？1、文件node_modules下，找到zrender文件。在zrender文件中找到event.js文件。3、找到event.js文件下的addEventListener函数，如下修改标注红色字体部分。2、具体路径：zrender/lib/core/event.js。试一下，图表无论是放大缩小，或者是拖动滚动条，应该都没问题了。
vue2/3 - Unable to preventDefault inside passive event listener due to target being treated as passi
高级前端工程师
12-26 3171
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
default-passive-events:使{被动
05-02
default-passive-events 当支持EventListenerOptions时，默认使{passive：true} 50行代码段，默认情况下启用某些事件的（）。 基本上，每次您声明新的时，它都会自动设置{Passive：true} 。 安装 yarn add default-passive-events 用法 只需提供包装： require ( 'default-passive-events' ) ; 或将其包含在本地： < script type =" text/javascript " src =" node_modules/default-passive-events/dist/index.js " > </ script > 或来自 ： < script type =" text/javascript " src =" https://unpkg.c
使用echarts遇到的问题总结记录
weixin_47783830的博客
12-16 1146
关于echarts使用的问题 1.关于安装echarts包遇到的问题（点击移动） 2. 关于echarts的自定义图例设置： 这个是我们ui的设计稿 图例需要我们自定义的图标，按照官方文档的方式配置 这样的图标配置，页面显示不出来 不报错，就表示官方文档提供的配置是没有问题的，问题出在图片引入。换一种方式： 用这样的方式引入，就OK了： 3.需求：数据滑动加载展示 根据官方文档介绍的datazoom配置，可以设置图表滑动，显示数据条数也是可以配置的；只要滑动加载用官方提供的api，可自行查看官方文档：e
【关于echarts使用所遇问题01】---- Unable to preventDefault inside passive event listener invocation
weixin_43624943的博客
11-19 1700
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obta
Echarts区域缩放(datazoom)鼠标滚动报错：Unable to preventDefault inside passive event listener invocation(问题篇)
Duke10的博客
06-02 1616
1、解决办法： 文件node_modules下，找到zrender文件。在zrender文件中找到event.js文件。 具体路径：zrender/lib/core/event.js。 找到event.js文件下的addEventListener函数，如下修改标注红色字体部分。 代码：el.addEventListener(name, handler, { passive: false }); 2、所遇到的情况： 1、带区域缩放的时间轴。 当鼠标在图表上下滚动时，报错：Unable to prevent
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.`，这是由于浏览器的性能优化机制导致的。现代浏览器为了提高滚动性能，默认将事件监听器标记为 `...
Unable to preventDefault inside passive event listener invocation
10-21
"Unable to preventDefault inside passive event listener invocation"是一个警告信息，意思是在被动事件监听器中无法使用preventDefault()方法。这个警告信息通常出现在使用addEventListener()方法添加事件监听器...
百度地图使用出现Unable to preventDefault inside passive event listener invocation.
04-25
在使用百度地图的过程中，如果遇到浏览器控制台提示 `Unable to preventDefault inside passive event listener invocation` 警告信息，这通常是由于现代浏览器为了优化滚动性能而默认将某些触摸或滚轮事件标记为...
Unable to preventDefault inside passive event listener invocation报错
weixin_44846945的博客
11-09 9790
Unable to preventDefault inside passive event listener invocation报错解决方案
Vue使用echart报错“Unable to preventDefault inside passive event listener invocation”
qq_39548550的博客
06-06 4925
今天，2022-06-06，被封了一个月，端午来公司上班第一天。今天在项目中碰到了一个棘手的问题，vue项目中使用echart，使用echart的dataZoom组件进行图表缩放的时候报错，“Unable to preventDefault inside passive event listener invocation”。...
解决Unable to preventDefault inside passive event listener invocation 报错问题
热门推荐
weixin_40716786的博客
05-29 4万+
问题描述：项目里使用echarts滚动事件在chrome里报错Unable to preventDefault inside passive event listener invocation 由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。 所以为了让页面滚动的效果如丝般顺滑，从 chrom...
echarts滚动条缩放的时候报错
Youkiu
07-25 1109
出现的问题 滚动条滑动的时候报错： 原因 echarts鼠标滑动出现缩放的事件是一个被动事件，但是实际上滑动的时候调用了event.preventDefault()，被浏览器监听到了，我们已经是被动事件，不能主动去触发event.preventDefault()，所以会出现以上的错误。 解决办法 在文件node_modules中找到zrender文件,在zrender文件中找到event.js文件 具体路径：zrender/lib/core/event.js 将el.addEventListener(na
Unable to preventDefault inside passive event listener due to target being treated as passive. => to...
weixin_30553065的博客
01-20 265
在使用 fastclick 并且在 chrome上 做 touch 时经常看到控制台信息： 原因：浏览器无法预先知道一个事件处理函数中会不会调用 preventDefault()，需要等到事件处理函数执行完后，才能去执行默认行为，然而事件处理函数执行是要耗时的，这样一来就会导致页面卡顿，也就是说，当浏览器等待执行事件的默认行为时，大部分情况是白等了。 从 chrome56 开始，在 win...
Unable to preventDefault inside passive event listener invocation警告
Suk__的博客
09-11 609
ant-mobile设置轮播图后左右滑动轮播图会报这个错,找到node_modules源码carousel.js中的第400行注释掉重启项目即可:
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值