echarts中使用event.stopPropagation()
时间: 2024-02-09 08:11:39 浏览: 56
在echarts中,如果你绑定了点击事件并且想要阻止事件冒泡,可以使用`event.stopPropagation()`方法。
具体步骤如下:
1. 在echarts的option中,为你需要绑定点击事件的图表添加`click`属性,并指定一个事件处理函数,例如:
```
option = {
...
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
// 绑定点击事件,并指定事件处理函数
onclick: function (params, event) {
console.log('点击了图表');
}
}]
...
};
```
2. 在事件处理函数中,使用`event.stopPropagation()`方法阻止事件冒泡,例如:
```
option = {
...
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
onclick: function (params, event) {
console.log('点击了图表');
event.stopPropagation(); // 阻止事件冒泡
}
}]
...
};
```
通过使用`event.stopPropagation()`方法,可以确保点击事件不会冒泡到父元素或其他元素中,避免多次执行事件处理函数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)