En la aplicación web que estoy desarrollando actualmente, muestro una serie de ubicaciones alrededor de una plaza de la ciudad con marcadores. Cuando se toca/hace clic en los marcadores, aparece una ventana emergente con una lista de menú de 4 elementos de acciones, por ejemplo, Más información, Ver galería, etc. En una plaza típica de la ciudad, puedo mostrar entre 5 y 25 marcadores de este tipo.

Los marcadores se crean desde JavaSript después de que se haya mostrado el mapa de la plaza. El código es algo como esto.

 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);

He simplificado y formateado el código real en aras de la legibilidad. El problema con el que me he encontrado es este. Quiero detectar eventos mousedown y touchstart en los tramos anteriores para hacer dos cosas

1. Ocultar la ventana emergente
2. Muestre otra ventana emergente HTML (no MapBox) que realice la acción requerida: muestre más información, muestre una galería de imágenes, etc.

Para hacer esto, pensé que simplemente podría identificar todos los tramos relevantes emitiendo un document.getElementsByClassName('xpop') . Sin embargo, esto no funciona: parece que MapBox en realidad no muestra el HTML emergente en el DOM hasta que aparece.

Puedo evitar el problema haciendo esto

• Primero emita un marker.togglePopup() en cada marcador a medida que se genera y después de que se haya configurado + adjuntado a su mapa principal
• Luego tome una referencia a cada intervalo de xpop mientras la ventana emergente aún está en exhibición.

Esto funciona, pero me parece una solución muy hacker. ¿Hay otra forma de lograr el mismo resultado final: vincular los eventos emergentes de HTML mousedown y touchstart con mis propios controladores de eventos?