当我单击包含按钮的 l.divicon 自定义 html 时如何阻止弹出窗口打开答案

【问题标题】：How to stop popup from opening when I click on l.divicon custom html containing a button当我单击包含按钮的 l.divicon 自定义 html 时如何阻止弹出窗口打开
【发布时间】：2019-11-16 04:58:31
【问题描述】：

我正在使用 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");
});

【问题讨论】：

猜测，但请尝试在 click 处理程序中添加 e.stopPropagation() 以阻止事件在 DOM 中冒泡
也可以试试e.preventDefault()。
它成功了，谢谢@RoryMcCrossan，分享你的答案，我会将其标记为已接受。
很高兴它有帮助。我为你添加了答案

标签： javascript jquery leaflet esri-leaflet esri-oss

【解决方案1】：

似乎当点击事件到达标记时，弹出窗口出现。在这种情况下，在click 处理程序中添加e.stopPropagation() 以阻止事件从#MyBtn 冒泡到标记。

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

【讨论】：