Leaflet JS中点击弹窗关闭按钮触发自定义函数的实现方法

Leaflet 默认的 popupclose 事件会在所有关闭弹窗的场景触发（比如点击地图空白处、调用 popup.close() 方法、点击关闭按钮），如果只想在点击右上角关闭按钮时执行自定义函数，可以通过直接监听关闭按钮的点击事件实现，具体有两种方式：

方式一：针对单个弹窗绑定事件 #

创建并打开弹窗后，获取弹窗DOM结构里的关闭按钮（Leaflet 给关闭按钮的类名是 leaflet-popup-close-button），直接给按钮绑定点击事件：

// 你的原有弹窗创建代码
const popup = L.popup()
  .setLatLng(e.latlng)
  .setContent(info)
  .openOn(map);

// 获取弹窗的关闭按钮元素
const closeBtn = popup.getElement().querySelector('.leaflet-popup-close-button');

// 绑定自定义函数
closeBtn.addEventListener('click', () => {
  // 替换成你的自定义函数逻辑
  console.log('仅点击关闭按钮时触发');
  yourCustomFunction();
});

方式二：事件委托（适合多弹窗场景） #

如果页面会动态创建多个弹窗，用事件委托的方式更高效，直接在地图容器上监听点击事件，判断点击目标是否是关闭按钮：

// 给地图容器绑定事件委托
map.getContainer().addEventListener('click', (event) => {
  if (event.target.classList.contains('leaflet-popup-close-button')) {
    // 执行自定义函数
    yourCustomFunction();
    
    // 如需获取当前弹窗实例，可通过以下方式
    const popup = map._popup;
    console.log('当前关闭的弹窗:', popup);
  }
});

这种方式不需要给每个弹窗单独绑定事件，一次绑定就能覆盖所有弹窗的关闭按钮点击场景。

内容的提问来源于stack exchange，提问作者santa