echarts点击legend时阻止事件冒泡

最新推荐文章于 2024-05-27 17:03:27 发布

出太阳下雨�

最新推荐文章于 2024-05-27 17:03:27 发布

阅读量1.6k

点赞数 1

分类专栏： echarts

本文链接：https://blog.csdn.net/A20190518/article/details/115128235

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍如何在Echarts中处理点击Legend事件，阻止该事件向上冒泡到父级元素，确保只有Echarts图表区域的点击才会触发父级的点击事件。示例代码展示了使用`event.stopPropagation()`和`event.cancelBubble=true`来实现这一功能。

摘要由CSDN通过智能技术生成

echarts点击legend的事件

this.dom.on('legendselectchanged', function(params) {
        event.stopPropagation();
        event.cancelBubble = true;
      })

页面效果图

点击下图legend，不会触发父级点击事件

点击下图echarts其他区域，会触发父级的点击事件
会触发父级点击事件

代码

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

出太阳下雨�

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

echarts 点击legend 阻止冒泡

世上没有真正的感同身受

08-23

793

需求是点击图标区域弹出弹窗展示详情，但是在切换出库或入库时弹窗也会弹出，所以的阻止切换事件的冒泡，如下。

Echarts点击事件（阻止冒泡）

weixin_38190600的博客

10-21

5037

var myCharts=self.$echarts.init(document.getElementById('myChart')); // 跳转前先解绑，防止重复跳转 myCharts.off('click'); myCharts.on('click',function(params){});

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

echarts柱形图点击事件阻止冒泡

笋笋的博客

05-27

498

echarts 柱形图

Echarts柱状图点击事件（阻止冒泡）

qq_43243541的博客

06-20

5206

Echarts柱状图点击事件（阻止冒泡）上面是我的柱状图转换饼状图，单击每个柱形图可以切换查看饼图！上次的文章已经说明了饼图的写法，柱状图也很简单可以参考echarts的官网，这里，我具体就是出现了冒泡事件，也就是说在我的柱状图上面可以看到有查询条件，当我点击查询事件得到结果值的时候就会出现冒泡事件解决方式很简单，上代码 // 跳转前先解绑，防止重复跳转 chartInstance.off(...

阻止事件冒泡

juddy123的博客

03-21

452

事件冒泡指事件在初始DOM上触发，通过DOM树往上在每一级父元素上触发。阻止事件向上冒泡，一般用return false;但是return false 的实际作用为： event.preventDefault(); event.stopPropagation(); 停止回调函数执行并立即返回。如果$("div a").click(function(){ re

echarts，给legend注册点击事件

逆风优雅的博客

05-10

2954

echarts图表注册点击事件，要在我们初始化后进行。以vue项目中echarts为例： myChart.on("legendselectchanged",(e)=>{ }）图例的点击事件 this.myChart = this.$e.init(this.$el); // init dom元素 this.myChart.setOption(this.chartOption, true); // 转载配置信息

如何阻止echarts中的legend点击事件冒泡

07-28

- *2* [Echarts柱状图点击事件（阻止冒泡）](https://blog.csdn.net/qq_43243541/article/details/93088124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

echarts的datazoom阻止冒泡

07-29

- *1* [echarts点击legend时阻止事件冒泡](https://blog.csdn.net/A20190518/article/details/115128235)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

echarts中的legend事件被外层的div事件遮挡，怎么解决

05-31

如果您使用 ECharts 绘制的图表，同时在图表外层包裹了一个 div，可能会遇到图例（legend）的点击...同时，我们在处理事件时调用了 `event.stopPropagation` 方法来阻止事件冒泡到外层 div，从而避免了被遮挡的问题。

vue3.0中使用echarts中的legend事件被外层的div事件遮挡，怎么解决

05-31

在 Vue3.0 中使用 ECharts，解决图例（legend）事件被外层 div 事件遮挡的问题，可以通过以下步骤...同时，我们在处理事件时调用了 `event.stopPropagation` 方法来阻止事件冒泡到外层 div，从而避免了被遮挡的问题。

如何处理 ECharts 图表中图例项和数据点的事件冲突？

热门推荐

小牛牛的博客

02-15

2万+

事件对象<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = fun

关于冒泡

llsr_k的博客

01-23

219

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box1 { width: 100px; height: 100px; float: left;

原生html中echarts的tooltip自动轮播、封装文件与使用（与上篇文章做对比）——（附源码）

weixin_44979432的博客

02-26

872

一、引入echarts-auto-tooltip.js文件 //在htnl文件引入js文件 <script src="echarts-auto-tooltip.js" type="text/javascript"></script> //在当前页面的js文件使用方法 function myChart(){ //Echarts配置略过 //渲染echarts加载数据 myChart.setOption(option); //增加轮播 tools.loopShowToo

事件冒泡之cancelBubble和stoppropagation的区别

weixin_34097242的博客

05-16

135

事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器...

JS:window.event.cancelBubble = true;

weixin_34198881的博客

12-21

439

<SCRIPT LANGUAGE="JScript">function checkCancel() {if (window.event.shiftKey) window.event.cancelBubble = true;}function showSrc() { if (window.event.srcElement.tagName == "IMG") al...