Mapbox-gl-js: The popup is not triggered when click on the html marker

[benderlidze]

Mapbox gl js Version 39/40

I am not sure, but when I click on the html Marker I see the click event in the console,
but there is no popup window. But when I click and hold the mouse button and move the mouse and then release the mouse button the popup appeares.

map.on('load', function() {

  var el = document.createElement('div');
  el.innerHTML = "CLICK ME"
  el.style.backgroundColor = "red"
  el.addEventListener('click', function(e) {
    console.log("click", e);
    new mapboxgl.Popup()
      .setLngLat([-77.04, 38.907])
      .setHTML("divInfo")
      .addTo(map);
  })
  new mapboxgl.Marker(el)
    .setLngLat([-77.04, 38.907])
    .addTo(map);
});

Here is a jsfiddle https://jsfiddle.net/1gwx64sd/

[mourner]

What actually happens is that the click triggers the popup opening, but then the event propagates through marker parents in the DOM, including the map container, which triggers a "click to close an open popup" action. To fix this, I added e.stopPropagation() to the event handler: https://jsfiddle.net/1gwx64sd/1/