Как остановить открытие всплывающих окон, когда я нажимаю на l.divicon custom html, содержащий кнопку

Question

Я использую библиотеку esrileaflet для отображения маркеров на карте со значком l.divicon, в котором есть кнопка в пользовательском HTML.

Я связал событие с нажатием кнопки, которое вызывается, но также открывается всплывающее окно маркера, которое мне не нужно.

Поскольку l.divicon содержит кнопку внутри своего пользовательского HTML и свою часть маркера, каждый раз, когда я нажимаю на кнопку, отображается предупреждение, а также открывается всплывающее окно маркера. Как я могу остановить всплывающее окно маркера?

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

Похоже, когда событие щелчка достигает маркера, появляется всплывающее окно. В этом случае добавьте e.stopPropagation() внутри обработчика click, чтобы остановить всплытие события с #MyBtn на маркер.

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