How to stop popup from opening when I click on l.divicon custom html containing a button

Question

I am using the esrileaflet library to render markers on a map having icon l.divicon which has a button in custom HTML.

I have bound an event to the button click which is called but also marker popup is opened which I don't want.

As l.divicon contains a button inside its custom HTML and its part of a marker, every time I click on the button it shows an alert and also opens the marker popup. How can I stop the marker popup?

let markerIcon = L.divIcon({
  iconSize: L.point(32, 32),
  iconAnchor: [5, 5],
  html: '<div><img src= "url here"><button id="MyBtn"></button></div>'
});
marker.setIcon(markerIcon);

$("#MyBtn").on('click', function(e) {
  alert("Hi there");
});

Answer 1

It seems like when the click event reaches the marker the popup appears. In which case, add e.stopPropagation() inside the click handler to stop the event bubbling up from #MyBtn to the marker.

$("#MyBtn").on('click', function(e) {
  e.stopPropagation();
  alert("Hi there");
});