apache / apache/echarts

[Bug] In the edge browser, after brush selection is enabled, the monitoring events of the parent elements of the canvas cannot be triggered(在edge浏览器中,开启brush刷选后,canvas的父级元素监听事件都无法触发)

Open
#20,843 1 comment 0 reactions 0 assignees View on GitHub
bug pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.6.0

### Link to Minimal Reproduction

https://codepen.io/xiaozhizhi666/pen/MYWVLdd?editors=1111

### Steps to Reproduce

`



ECharts 鼠标框选放大


#parent {
position: relative;
z-index: 1;
}
#chart canvas {
pointer-events: auto;
}






// 1. 父元素捕获事件(优先注册)
document.getElementById('parent').addEventListener(
'mousedown',
() => console.log('Parent mousedown (Capture)'),
{ capture: true }
);

// 2. 初始化 ECharts
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
xAxis: { type: 'value' },
yAxis: { type: 'value' },
series: [{ type: 'scatter', data: [[10, 20], [30, 40]] }],
brush: {

}
});
// 触发刷选模式
chart.dispatchAction({
type: 'takeGlobalCursor',
key: 'brush',
brushOption: {
brushType: 'rect',
brushMode: 'multiple'
}
});

// 3. ECharts 事件处理(禁止阻止冒泡)
document.getElementById('chart').addEventListener('mousedown', (event) => {
console.log('ECharts mousedown');
// const nativeEvent = event.event;
// nativeEvent.stopPropagation = () => {}; // 禁用原生事件冒泡阻止
}, { capture: true });

// 4. 可选:在 document 捕获阶段监听
document.addEventListener(
'mousedown',
() => console.log('Document mousedown (Capture)'),
{ capture: true }
);

`
Copy the above code in the html file, open it directly in the edge browser, click the chart area, you will find that the monitoring event set by the parent element of canvas is not triggered; When you open it on chrome, events can be triggered
(在html文件里复制上面这段代码,直接在edge浏览器上打开,点击chart区域,会发现canvas的父级元素所设置的监听事件没有触发;而当你在chrome上打开时,事件是可以触发的)

### Current Behavior

When I started brush selection mode for chart Settings, I clicked the chart area on edge browser, and the monitoring event set by the parent element of canvas did not trigger, but the event could trigger when it was opened on chrome
(当我对chart设置开启brush刷选模式后,在edge浏览器上,点击chart区域,canvas的父级元素所设置的监听事件没有触发,chrome上打开时,事件是可以触发的)

### Expected Behavior

In the edge browser, click on the chart field, and the listening event set by the canvas parent element can be triggered
(在edge浏览器上,点击chart区域,canvas的父级元素所设置的监听事件可以触发)

### Environment

```markdown
- OS:Windows 11 23H2
- Browser:Edge 134.0.3124.72
- Framework:html
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.