[Bug] myChart.getZr().on('mouseover', () => {}) 在空白区域不能触发

[mgzhenhong]

Version

5.6.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi_MQegsJiAIwArAAMPLAATADMmTnZACxZ2ckAHFnJualVRQDspQBs6dahHhTUdP4Q0MpxdiS2dgDcKCgAtuQAwtqMHGAAdKxUYABaHAAUAJSLMJu0E8AK4cA-ETI7CAB8sPQweMD-VIv-wKwHRydUZxGwVOdoGBaNttmMprN5ksVustrt9odjqcFMCsld4Ld7tBHs9Xu9Pkifij_oDgaCRkA

Steps to Reproduce

https://echarts.apache.org/examples/zh/editor.html?code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi_MQegsJiAIwArAAMPLAATADMmTnZACxZ2ckAHFnJualVRQDspQBs6dahHhTUdP4Q0MpxdiS2dgDcKCgAtuQAwtqMHGAAdKxUYABaHAAUAJSLMJu0E8AK4cA-ETI7CAB8sPQweMD-VIv-wKwHRydUZxGwVOdoGBaNttmMprN5ksVustrt9odjqcFMCsld4Ld7tBHs9Xu9Pkifij_oDgaCRkA

参考代码即可

Current Behavior

myChart.getZr().on('mouseover', () => {}) 在鼠标进入空白区域时不能触发
myChart.getZr().on('mouseout', () => {}) 可以正常触发

Expected Behavior

与文档描述不符

zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发

https://echarts.apache.org/handbook/zh/concepts/event/#%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD%E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6

Environment

- OS:Windows 11
- Browser:Edge 131.0.2903.112 
- Framework: Vue@3

Any additional comments?

No response

[echarts-bot]

@mgzhenhong It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

BODY

Version

5.6.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGY VA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi _MQegsJiAIwArAAMPLAATADMmTnZACxZ2ckAHFnJualVRQDspQBs6dahHhTUdP4Q0MpxdiS2dgDcKCgAtuQAwtqMHGAAdKxUYABaHAAUAJS LMJu0E8AK4cA-ETI7CAB8sPQweMD-VIv-wKwHRydUZxGwVOdoGBaNttmMprN5ksVustrt9odjqcFMCsld4Ld7tBHs9Xu9Pkifij_oDgaCRkA

Steps to Reproduce

https://echarts.apache.org/examples/zh/editor.html?code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGY VA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi _MQegsJiAIwArAAMPLAATADMmTnZACxZ2ckAHFnJualVRQDspQBs6dahHhTUdP4Q0MpxdiS2dgDcKCgAtuQAwtqMHGAAdKxUYABaHAAUAJS LMJu0E8AK4cA-ETI7CAB8sPQweMD-VIv-wKwHRydUZxGwVOdoGBaNttmMprN5ksVustrt9odjqcFMCsld4Ld7tBHs9Xu9Pkifij_oDgaCRkA

[Just refer to the code ](https://echarts.apache.org/examples/zh/editor.html?code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCG YVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi _MQegsJiAIwArAAMPLAATADMmTnZACxZ2ckAHFnJualVRQDspQBs6dahHhTUdP4Q0MpxdiS2dgDcKCgAtuQAwtqMHGAAdKxUYABaHAAUAJSL MJu0E8AK4cA-ETI7CAB8sPQweMD-VIv-wKwHRydUZxGwVOdoGBaNttmMprN5ksVustrt9odjqcFMCsld4Ld7tBHs9Xu9Pkifij_oDgaCRkA)

Current Behavior

myChart.getZr().on('mouseover', () => {}) cannot be triggered when the mouse enters a blank area
myChart.getZr().on('mouseout', () => {}) can be triggered normally

Expected Behavior

Does not match the documentation description

The zrender event is different from the echarts event. The former will be triggered when the mouse is anywhere, while the latter can only be triggered when the mouse is on the graphic element.

https://echarts.apache.org/handbook/zh/concepts/event/#%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD% E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6

Environment

- OS: Windows 11
- Browser:Edge 131.0.2903.112
- Framework: Vue@3

Any additional comments?

No response

[helgasoft]

why expect getZr to trigger mouseover over a blank area? it has to be "over" something.
getZr over blank area can only trigger events like mousemove, click, contextmenu.
📌 please close issue if problem solved.

[mgzhenhong]

The significance of triggering the mouseover event in the blank area :
it is triggered when the mouse crosses the boundary from outside the area and enters the chart area. The difference from the mousemove event is that the mousemove event will be triggered continuously, while the mouseover event is only triggered once. The mouseover event should correspond to the mouseout event.

[Ovilia]

It seems ZRender triggers click event no matter whether it happens from a target element, while mousemove/moveout don't work similarly. The doc is talking about click event so technically it may not be considered as a bug.

You may consider add event listener to the dom of the chart to have full control of that, i.e., dom.addEventListener('xxx', ...).

[mgzhenhong]

It seems ZRender triggers click event no matter whether it happens from a target element, while mousemove/moveout don't work similarly. The doc is talking about click event so technically it may not be considered as a bug.

You may consider add event listener to the dom of the chart to have full control of that, i.e., dom.addEventListener('xxx', ...).

OK, dom.addEventListener, that's the solution.

but , a mouseout event without a mouseover event, It's never perfect

[badspider7]

I have the same problem.
I use the updateAxisPointer action,why i put my mouse in chart,i should disable that action,so i use mouseover and mouseout event,but that can only useful in line not all chart.
dom.addEventListener is a way to slove this problem,but not perfect.