javascript - 将事件从覆盖的 div 传递到 Highmaps

Question

我正在使用 Highmaps 来显示一个简单的 map ，在它上面我有另一个 div，其中有一个组件可以在 map 顶部绘制内容(必须以这种方式完成，不幸的是，我无法在 Highmaps 中绘制所有内容)。

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

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

我已经设置了一个简单的 fiddle 来完成我想要的工作:http://jsfiddle.net/k11yfz58/1/

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

谢谢!

编辑

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

Answer 1

您可以将其添加到您的 CSS 中:

#overlay {
    pointer-events: none;
}

来自MDN :

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

和none值:

none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

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