yangcodry opened a new issue, #20843: URL: https://github.com/apache/echarts/issues/20843
### Version 5.6.0 ### Link to Minimal Reproduction https://codepen.io/xiaozhizhi666/pen/MYWVLdd?editors=1111 ### Steps to Reproduce `<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ECharts 鼠标框选放大</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";></script> <style> #parent { position: relative; z-index: 1; } #chart canvas { pointer-events: auto; } </style> </head> <body> <div id="parent" style="width: 600px; height: 400px; border: 1px solid red;"> <div id="chart" style="width: 100%; height: 100%;"></div> </div> <script> // 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 } ); </script> </body> </html>` 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_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
