将事件从覆盖的 div 传递到 Highmaps答案

【问题标题】：Pass event from overlayed div to Highmaps将事件从覆盖的 div 传递到 Highmaps
【发布时间】：2018-03-07 14:00:34
【问题描述】：

我正在使用 Highmaps 来显示一个简单的地图，并且在它上面我有另一个 div，其中包含一个在地图顶部绘制东西的组件（必须这样做，我不能在 Highmaps 中绘制所有内容，不幸的是）。

现在我想与地图进行一些交互，尽管它在我的 div 下方。我想知道当我点击地图上的 div 时，是否有办法触发地图上的点击、悬停等事件。

我搜索了Highmaps docs 试图找到一个类似trigger(ev, x, y) 的方法，但似乎没有。然后我尝试了在 Map DOM 上使用 MouseEvent() 和 dispatchEvent() 的纯 JavaScript 解决方案，但它也没有用。

我已经为我想要的工作设置了一个简单的小提琴：http://jsfiddle.net/k11yfz58/1/

如果我们评论#overlay div，当我们点击某个状态时会收到警报。我想要相同的行为，但点击覆盖 div，这可能吗？

谢谢！

编辑

建议为此使用pointer-events CSS 属性。这并不能解决我的问题，因为我还需要在 #overlay div 上触发事件。

【问题讨论】：

Highcharts 不仅使用 dom 事件，还使用自定义事件——这些事件可以由 Highcharts.fireEvent 或 Point.prototype.firePointEvent 调度——参见示例jsfiddle.net/2u400kp9。您尝试做的事情 - 手动触发事件 - 可能很难实现。我认为您应该重新考虑将该叠加层放在图表上 - 在图表上绘制附加/自定义项目似乎是一种更清洁的方式。
不幸的是，在 highmaps 中绘图不是一种选择。它上面的 div 实际上包含另一个使用画布的复杂图形组件。现在，我将开发一个功能，当用户想要与地图交互时，通过按钮隐藏顶部的 div，但我仍然对如何实现传递事件的理想行为持开放态度。

【解决方案1】：

您可以将其添加到您的 css 中：

#overlay {
    pointer-events: none;
}

来自MDN：

pointer-events CSS 属性指定在什么情况下（如果有）特定图形元素可以成为鼠标事件的目标。

和none 值：

无
元素永远不是鼠标事件的目标；但是，鼠标事件可能会针对其后代元素，如果这些后代元素的指针事件设置为其他值。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间适当地触发此父元素上的事件侦听器。

这意味着您的叠加元素对鼠标事件“不可见”，因此鼠标事件发生在下面的 div 上。

【讨论】：

您好 Métoule，感谢您的回答。我不知道这个属性，但不幸的是这并不能解决我的问题。我仍然需要这些事件也发生在#overlay div 上......：/你还有其他想法吗？