前端 - 如何解决echarts-gl map3d中zrender点击事件触发两次的问题？

Question

echarts-gl map3d渲染中国地图，绑定zrender点击事件，在点击地图元素的时候，为什么zrender事件会触发两次？第一次的event.target的值是undefined，第二次event.target才有值

代码

Answer 1

this.chart.off('click')
this.chart.on('click')

Answer 2

在 ECharts-GL 的 map3d 图表中，如果你发现 zrender 的点击事件被触发了两次，并且第一次的 event.target 是 undefined，第二次才有值，这通常是因为事件冒泡或者事件被绑定了两次。

以下是一些可能的解决方案：

1. 检查事件绑定次数：
   确保你没有在代码中多次绑定相同的事件。每次图表初始化或更新时，都应该检查是否已经有事件监听器绑定，避免重复绑定。
2. 使用 event.stopPropagation()：
   在事件处理函数中，你可以调用 event.stopPropagation() 来阻止事件冒泡。这可以确保事件只在当前元素上被处理，不会冒泡到父元素或其他元素上。
3. 检查 ECharts 和 zrender 的版本：
   确保你使用的 ECharts 和 zrender 的版本是兼容的，并且没有已知的此类问题。如果可能，尝试更新到最新版本。
4. 使用正确的 ECharts API 进行事件处理：
   ECharts 提供了一套完整的事件处理机制，你可以直接使用 ECharts 的 API 来处理点击事件，而不是直接操作 zrender。例如，你可以使用 chart.on('click', function (params) {...}) 来处理点击事件。
5. 调试和查看事件流：
   使用浏览器的开发者工具来查看事件流，看看是否有其他元素或库也在处理相同的事件，并导致事件被触发多次。
6. 简化代码：
   尝试简化你的代码，逐步排除可能导致问题的部分。例如，先尝试在一个简单的图表上绑定事件，看看是否还有同样的问题。

如果上述方法都不能解决问题，你可能需要深入查看 ECharts-GL 和 zrender 的内部实现，或者寻求社区的帮助，提供更多的代码和上下文信息。

请注意，由于我无法直接访问你的代码或环境，上述建议是基于你提供的信息和常见的编程实践给出的。具体解决方案可能需要根据你的实际情况进行调整。