Echarts鼠标事件阻止冒泡
不知道大家在使用echarts的鼠标事件时，有没有类似弹窗那种需求（点击弹窗外的遮罩区域，弹窗消失）：此处即点击图表的图形有自己的点击事件，点击图形外空白，可以做其他处理（比如恢复所有分类的总计等等）。
一、分析需求
我们以官方demo的饼状图为例，在echarts生成的饼状图中，有两个期望点：
- 希望点击每个扇形触发点击事件处理各自事宜； 这个按照官方api就可以做声明，具体如下：
// 饼图的点击事件
myChart.on('click',function(param){
// 根据dataIndex或者name来判断点击是哪一块区域，即可分开处理
if(param.dataIndex){
//body...
}
})- 点击饼状图外的空白区域，触发一个点击事件。
类似弹窗遮罩的实现方式，我们通常会在容器元素上绑定一个点击事件，然后设置里面的子元素的点击事件阻止冒泡即可。
假设此处我初始化echarts的dom的id是
#main，那么设置容器元素点击事件方式如下：
- 点击饼状图外的空白区域，触发一个点击事件。
类似弹窗遮罩的实现方式，我们通常会在容器元素上绑定一个点击事件，然后设置里面的子元素的点击事件阻止冒泡即可。
假设此处我初始化echarts的dom的id是
// 整个canvas区域的点击事件
var oDiv = document.querySelector('#main>div');
oDiv.onclick = function() {
//body ...
}二、解决方案探索
按照上面的分析，接下来我们只需要对扇形的点击事件做阻止冒泡就好了。
我的测试代码如下：
分别使用了常识里的event.stopPropagation()、return false;，甚至看到params有个cancelBubble也尝试设置成true，都无法生效
// 饼图的点击事件
myChart.on('click',function(param){
// console.log('param',param);
console.log('click circle-image')
// param.event.cancelBubble = true; // 无效
// param.event.event.stopPropagation(); // 无效
// return false; // 无效
})
// 整个canvas区域的点击事件
var oDiv = document.querySelector('#main>div');
oDiv.onclick = function() {
console.log('click div');
}以上方法都不行，只能回归到逻辑处理上了。 我们的意愿是：点击了扇形触发扇形点击事件，就不要去触发整个区域点击事件。那么，我们设置一个全局变量来指明当前点击的是不是空白区域，然后整个区域点击事件需要根据这个全局变量来判断是否执行代码即可。 具体代码实现如下：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {...}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 点击的是否是饼图外的空白区域。相当于是要阻止饼图点击事件的冒泡。
window.isBlank = true;
// 饼图的点击事件
myChart.on('click',function(param){
window.isBlank = false;
console.log('click circle-image')
})
// 整个canvas区域的点击事件
var oDiv = document.querySelector('#main>div');
oDiv.onclick = function() {
if (window.isBlank) {
console.log('click blank');
}
window.isBlank = true; // 注意要在此处再设置为true，不然整个isBlank判断就变成只有一次功用了。
}结语
其实相当的解决方案应该说不上有什么逻辑，但前期受插件的配置项和api影响，总觉得插件会有相关项配置或者有什么高明的解决方案，所以探索了蛮一会儿。 不过，也许真的有更好的解决方法，希望有同仁有我同样的需求，并寻觅不同的解决方案可以一起探索。
关联文章：
- Echarts柱状图点击事件（阻止冒泡）
采用
myChart.off('click')。网路上输入echarts 阻止冒泡，出来很多这个解决方案的文章。没太清楚他们遇到的场景，对我的场景不适用。 - echarts鼠标事件阻止冒泡
采用
param.event.event.stopPropagation()。这也是我一开始要采用的阻止冒泡方法，最初也是不知道怎么获取window.event。但是这个方法似乎不生效？至少在我的demo里面是不可行的。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读