In the webapp that I am currently developing I show a number of locations around a city square with markers. When tapped/clicked the markers display a popup with a 4 item menulist of actions - e.g. More Information, View Gallery etc. On a typical city square I may show between 5 and 25 such markers.

The markers are created from JavaSript after the map of the square has been displayed. The code goes something like this

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

I have simplified and formatted the actual code in the interests of readability. The problem I have run into is this. I want to detect mousedown and touchstart events on the spans above in order to do two things

1. Hide the popup
2. Display another HTML popup (not MapBox) that performs the required action - showing more information, displaying a picture gallery etc.

In order to do this I thought I could simply identify all relevant spans by issuing a document.getElementsByClassName('xpop'). However, this does not work - it looks like MapBox does not actually render the popup HTML into the DOM until it has, well, popped up.

I can circumvent the problem by doing this

• First issue a marker.togglePopup() on each marker as it is generated and after it has been configured + attached to its parent map
• Then grab a reference to each xpop span while the popup is still on display.

This works but feels like a very hackish solution to me. Is there another way to accomplish the same end result - linking the popup HTML mousedown and touchstart events with my own event handlers?