删除在其他事件侦听器函数中定义的弹出窗口

Question

我的事件侦听器函数根据变量 codedCities 的长度打开 i 个弹出窗口，该变量动态变化。此功能运行良好，但问题是删除弹出窗口。在 'mouseout' 我希望在 'mouseover' 打开的所有弹出窗口都关闭。

item.addEventListener('mouseover', function() {

          for (var i in codedCities) {

 var  popupB = new mapboxgl.Popup({
                offset: [0, -10],
                closeButton: false,
                closeOnClick: true,
                anchor: 'top-left'
            });

              popupB.setLngLat(codedCities[i].geometry.coordinates)
              .setHTML('<div>' + codedCities[i].properties.city + '</div>')
              .addTo(map);

        }

  });

使用 Mapbox GL，每个功能都会创建一个新的 mapboxgl.Popup 实例，这意味着必须删除相同数量的弹出窗口。到目前为止，我已经尝试过：

    item.addEventListener('mouseout', function() {

      if (popupB){
          popupB.remove();
        } else {
          console.log("no more popups!")
        }
    });

但这不起作用，因为 popupB 是在先前函数中定义的局部变量。然后我尝试在前面的函数中使用 window.popupB 将 popupB 定义为全局变量，但只有 one 实例 popupB 被删除，而不是全部。然后我尝试将数字 [i] 添加到弹出变量名称并循环遍历所有弹出窗口 window["popup" + i] = new mapboxgl.Popup

        item.addEventListener('mouseout', function() {

        var step;
        for (step = 0; step < codedCities.length ; step++) {    
        window["popup" + step].remove();

          }
      });

但这根本没有显示任何内容。我想知道这个问题是否有已知的解决方法。

如何在 mouseover 函数中定义和创建弹出窗口，然后在 mouseout 函数中删除那些完全相同的弹出窗口？

有没有办法将我想要的 mouseout 包含在 mouseover 函数中？

Answer 1

您可以在弹出窗口和 mouseout 上添加一个常见的 css class ，只需将目标对象与 css class 并关闭它们。

删除在其他事件侦听器函数中定义的弹出窗口

Removing popups defined in other event listener functions

javascript

popup

mapbox-gl