禁用要由底层元素处理的元素上的事件

Question

我正在创建一个应用程序，我可以使用鼠标事件控制地图，并在地图上显示div叠加以显示信息。

问题是，当叠加div在我的地图上时，我失去了对地图的控制（事件由叠加层注册，而不是由下面的地图注册）。

我尝试将CS​​S属性pointer-events: none应用于我的叠加层，但这不起作用。

我已经设置了一个说明问题https://codesandbox.io/s/oj3nkxm72q

的工作示例

关于如何做到这一点的任何想法？

Answer 1

试试这个希望它适合你。 对于overlay类，给出css位置：绝对;和z-index：2;， 对于mapboxgl-map类，使z-index：1;而不是-1;