OpenLayer 4 弹出窗口，防止指针指向 div 后面的目标数据

Question

我对 OpenLayers 4 的弹出窗口有问题，当我打开弹出窗口信息并且我在指针 div 内时，它仍然触发带有弹出窗口后面数据的悬停弹出窗口，我该如何预防？

我正在使用此 CSS 弹出窗口代码：

#popup {
  z-index: 20;
  background-color: #fff;
}

弹出窗口是使用叠加层创建的：

overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

但是指针还是穿过了div。弹出窗口包含很多 div 和内部 span

在屏幕截图中，当指针位于 Vehs 文本上时触发悬停弹出窗口

你可以参考这个用于弹出窗口的代码，唯一的区别是我有一个悬停弹出窗口，我认为问题在于创建点击弹出窗口（带按钮的那个）和它的真实 z-index。

http://openlayers.org/en/latest/examples/popup.html

Answer 1

您可以在打开前使用 pointer-events:none，打开后可以使用 pointer-events:all

Answer 2

最后，我找到了一个非常简单的方法来解决这个问题，在我调用悬停弹出窗口的函数中我添加了一个简单的if语句

map.on('pointermove', function(evt) {

    info.html("");

    if (overlay.getPosition() !== undefined) {
      return;
    }
.....
}