在切换弹出窗口之前，MapboxGL 标记弹出元素不存在

Question

在我目前正在开发的网络应用程序中，我用标记显示了城市广场周围的多个位置。当轻击/单击时，标记会显示一个弹出窗口，其中包含 4 项操作菜单列表 - 例如更多信息、查看图库等。在典型的城市广场上，我可能会显示 5 到 25 个这样的标记。

显示广场地图后，通过 JavaSript 创建标记。代码是这样的，

const element = document.createElement('div');
element.classList.add('popim000','popimNN');
//popimNN where NN is 01, 02 etc determines the map pin used

const marker = new mapboxgl.Marker({element}).setLngLat(entry.latlng),
      popup = new mapboxgl.Popup({offset:25}),
      html = '<span class='laSpan xpop'>Read More</span>' + 
             '<span class='laSpan xpop'>View Gallery</span>' + 
             '<span class='laSpan xpop'>Not of interest</span>';


marker.addTo(mapBoxMapInstance);
popup.setHTML(html);
marker.setPopup(popup);

为了可读性，我对实际代码进行了简化和格式化。我遇到的问题是这样的。我想检测上面跨度上的 mousedown 和 touchstart 事件，以便执行两件事

1. 隐藏弹出窗口
2. 显示另一个执行所需操作的 HTML 弹出窗口（不是 MapBox） - 显示 。

为了做到这一点，我想我可以通过发出 document.getElementsByClassName('xpop') 来简单地识别所有相关的跨度 然而，这不起作用——看起来 MapBox 实际上并没有将弹出 HTML 渲染到 DOM 中，直到它弹出为止。

我可以通过这样做来规避这个问题

• 首先在每个标记生成时发出一个 marker.togglePopup() 在它被配置+附加到其父地图之后
• 然后获取对每个 的引用当弹出窗口仍在显示时，>xpop 跨度。

这可行，但对我来说感觉像是一个非常黑客的解决方案。是否有另一种方法可以实现相同的最终结果 - 将弹出 HTML mousedown 和 touchstart 事件与我自己的事件处理程序链接？