vue-echarts区域缩放(datazoom)鼠标滚动报错:Unable to preventDefault inside passive event listener invocation

最新推荐文章于 2023-06-11 12:35:08 发布
最新推荐文章于 2023-06-11 12:35:08 发布

1.先上报错的j截图:

2、解决办法:
文件:在依赖包** node_modules **下,找到**zrender**文件。在**zrender**文件中找到**event.js**文件。

具体路径: **zrender/lib/core/event.js。**

找到* *event.js **文件下的** addEventListener **函数,如下修改标注红色字体部分。

`export function addEventListener(el, name, handler, opt) {
    if (isDomLevel2) {
        // el.addEventListener(name, handler, opt);
        el.addEventListener(name, handler, { passive: false });
    else {
        el.attachEvent('on' + name, handler);
代码:el.addEventListener(name, handler, { passive: false });

3.**原因**
我们的事件已经默认被定义为了被动事件监听。结果我们在这个事件监听中调用了event.preventDefault(),浏览器就不高兴了,报错,告诉你:“你定义的事件不是一个被动事件监听吗?不就是告诉我为了提高响应速度不要处理event.preventDefault()吗?为啥你还要调用event.preventDefault()!”

为什么事件被默认定义为被动事件监听?为了提高浏览器的响应速度。

最后为了方便大家的沟通与交流请加QQ群: 625787746

请进QQ群交流:【IT博客技术分享群①】: https://jq.qq.com/?_wv=1027&k=DceI0140

vue-echarts区域缩放(datazoom)鼠标滚动报错:Unable to preventDefault inside passive event listener invocation 1.先上报错的j截图:2、解决办法:文件:在依赖包**node_modules**下,找到**zrender**文件。在**zrender**文件中找到**event.js**文件。具体路径:**zrender/lib/core/event.js。**找到**event.js**文件下的**addEventListener**函数,如下修改标注红色字体部分。`export function addEventListener(el, name, handler, opt) { .
" Unable to preventDefault inside passive event listener due to target being treated as passive ." 这个 误通常是由于尝试阻止已被声明为被动的事件的默认行为所引起的。要解决这个问题,可以尝试以下方法: elem.add Event Listener ('touchstart', function(e) { e. preventDefault (); }, { passive : false }); 使用 { pas
前提:npm安装echarts依赖: npm install echarts--save 注意:使用npm的时候,我们直接通过require(‘echarts’)来引入,按需引入需要用到的方法,代码中都有体现; X轴数据过多时使用 dataZoom 属性实现,如下图代码块: 1 误 谷歌浏览器 vue项目的 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive . 一个组件代码如下,发生图中 误 <template> <div class = "footerGuideStyle"> <a href="java
在做后台管理的时候,很多时候会用到数据展示,一般有饼状图,柱状图,折线图以及雷达图等(我列举的是较为常用的) 那么有时候也会出现同一个页面里会有不止一个饼图或者柱状图,这个时候,写两个组件吧,太麻烦,而且内容一模一样,也失去了写组件最初的意义。 但是一个组件调用两次,你渲染的时候会发现,他只会渲染一次,就是说另一个柱状图的位置是空白,emmmmmmmmm,这可怎么解决呢? 当然是有办法的啦,
Vue-Echarts 是一个基于 Vue.js 的 Echarts 图表组件库。Echarts 是百度开源的一个强大的数据可视化库,而 Vue-Echarts 则是对 Echarts 进行了封装,使其更易于在 Vue.js 项目中使用。 Vue-Echarts 提供了一些 Vue.js 组件,这些组件可以直接在 Vue 模板中使用,以便快速创建和配置各种类型的图表。使用 Vue-Echarts ,你可以轻松地在 Vue.js 项目中创建折线图、柱状图、饼图、雷达图等各种图表。 使用 Vue-Echarts ,你需要先安装 Echarts 和 Vue-Echarts 。然后,在你的 Vue 组件中引入 Vue-Echarts 组件并传入相关的配置数据,就可以在页面上展示相应的图表了。 下面是一个简单的示例代码,展示了如何在 Vue 组件中使用 Vue-Echarts : <template> < vue-echarts :options="chartOptions" style="height: 400px;"></ vue-echarts > </template> <script> import VueECharts from ' vue-echarts '; export default { components: { VueECharts, data() { return { chartOptions: { // 图表的配置项和数据 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], yAxis: { type: 'value', series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'bar', </script> 这个示例展示了一个简单的柱状图,x 轴表示星期几,y 轴表示某项数据的数值。你可以根据实际需求,修改配置数据来创建不同类型的图表。