echarts点击legend时阻止事件冒泡

最新推荐文章于 2023-08-23 10:35:35 发布
最新推荐文章于 2023-08-23 10:35:35 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A20190518/article/details/115128235
版权

echarts点击legend的事件

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

页面效果图

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

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

代码

代码

出太阳下雨�
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts legend 排列问题
05-14
legend 图例组件可以分组展示。详细说明：https://blog.csdn.net/qq_36437172/article/details/106125254
Angularjs-echarts 点击事件
03-20
Angular-echarts是 wangshijun对echarts利用Angular封装的组件，github地址https://github.com/wangshijun/angular-echarts。附件只是在源码例子里上添加了点击事件。
echarts 点击legend 阻止冒泡
最新发布
世上没有真正的感同身受
08-23 649
需求是点击图标区域弹出弹窗展示详情，但是在切换出库或入库时弹窗也会弹出，所以的阻止切换事件的冒泡，如下。
Echarts点击事件（阻止冒泡）
weixin_38190600的博客
10-21 4942
var myCharts=self.$echarts.init(document.getElementById('myChart')); // 跳转前先解绑，防止重复跳转 myCharts.off('click'); myCharts.on('click',function(params){});
Echarts柱状图点击事件（阻止冒泡）
qq_43243541的博客
06-20 5079
Echarts柱状图点击事件（阻止冒泡） 上面是我的柱状图转换饼状图，单击每个柱形图可以切换查看饼图！上次的文章已经说明了饼图的写法，柱状图也很简单可以参考echarts的官网，这里，我具体就是出现了冒泡事件，也就是说在我的柱状图上面可以看到有查询条件，当我点击查询事件得到结果值的时候就会出现冒泡事件解决方式很简单，上代码 // 跳转前先解绑，防止重复跳转 chartInstance.off(...
阻止事件冒泡
juddy123的博客
03-21 432
事件冒泡指事件在初始DOM上触发，通过DOM树往上在每一级父元素上触发。 阻止事件向上冒泡，一般用return false;但是return false 的实际作用为：    event.preventDefault();    event.stopPropagation();    停止回调函数执行并立即返回。 如果$("div a").click(function(){ re
阻止冒泡
qq_23260639的博客
06-19 162
if ( e.stopPropagation ){ //标准浏览器 e.stopPropagation(); }else{ //兼容IE window.event.cancelBubble = true; }
JS:window.event.cancelBubble = true;
weixin_34198881的博客
12-21 423
<SCRIPT LANGUAGE="JScript">function checkCancel() {if (window.event.shiftKey)    window.event.cancelBubble = true;}function showSrc() {    if (window.event.srcElement.tagName == "IMG")        al...
vue 项目引入echarts 添加点击事件操作
10-14
`this.calendarChart.on('click', callback)`用来添加点击事件监听器，当用户点击图表时，`callback`函数会被调用，参数`param`包含了点击事件的相关信息。最后，`this.calendarChart.setOption()`用于设置图表的...
在echarts中图例legend和坐标系grid实现左右布局实例
09-16
主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
对echarts压缩包进行修改当legend过多时可以进行翻页
08-10
对echarts压缩包进行修改，当legend过多时，可以进行翻页
Echarts实现冒泡排序
weixin_52188227的博客
04-03 278
Echarts实现冒泡排序
echarts 自定义legend点击事件，改写点击行为
AlexZZ0823的博客
03-07 2896
需求背景： 小程序中页面，饼图的legend需要支持用户点击出现弹出框；官网上点击legend时只支持选中/取消当前对应的模块 解决方案：监听legendSelectchanged事件，执行legend被点击后立即被选中，然后再写其他自定义业务代码 onLoad() { this.initChart() } // 初始化chart initChart(type) { const self = this const option = {...} // 设置数据及配置项option this.
Vue使用Echarts在父子组件中传值问题
达顿瓦珠
06-16 826
最近项目上需要使用到Echarts做数据可视化，在写项目过程中发现在子组件中通过Echarts点击事件传值给父组件不起作用的问题，研究了一下，发现是作用域问题，解决fang'fa
echarts，给legend注册点击事件
逆风优雅的博客
05-10 2883
echarts图表注册点击事件，要在我们初始化后进行。 以vue项目中echarts为例： myChart.on("legendselectchanged",(e)=>{ }） 图例的点击事件 this.myChart = this.$e.init(this.$el); // init dom元素 this.myChart.setOption(this.chartOption, true); // 转载配置信息
vue事件对象、冒泡、阻止默认行为
热门推荐
小牛牛的博客
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 188
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box1 { width: 100px; height: 100px; float: left;
事件冒泡之cancelBubble和stoppropagation的区别
weixin_34097242的博客
05-16 123
事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。 不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器...
原生html中echarts的tooltip自动轮播、封装文件与使用（与上篇文章做对比）——（附源码）
weixin_44979432的博客
02-26 843
一、引入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
如何阻止echarts中的legend点击事件冒泡
07-28
要阻止echarts中的legend点击事件冒泡，可以使用以下代码： ```javascript this.dom.on('legendselectchanged', function(params) { event.stopPropagation(); event.cancelBubble = true; }) ``` 这段代码会在legend被点击时阻止事件冒泡，确保事件不会传递给其他元素。\[1\] #### 引用[.reference_title] - *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_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *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_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [echarts 给legend图例加个标题式文字设置为普通文本不可点击](https://blog.csdn.net/weixin_29743373/article/details/112829578)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值