Ngx-leaflet弹窗关闭按钮点击跳转#close问题解决

问题本质 #

Leaflet默认渲染的popup关闭按钮是<a>标签，默认href属性值为#close，当组件内部的默认事件阻止逻辑未生效时，点击按钮会触发浏览器原生锚点跳转，导致地址栏追加#close、页面异常滚动。

首先做基础校验：你当前代码已经配置了closeButton: false，正常逻辑下不会渲染关闭按钮，先排查两点：

• 是否自定义了popup内容模板，手动写入了带href="#close"的关闭按钮结构
• 是否引入的Leaflet版本存在配置兼容问题，导致closeButton: false配置未生效

修复方案 #

方案1：不需要关闭按钮（匹配你当前的配置预期） #

确保closeButton: false配置正确生效，自定义popup内容时不要手动拼接Leaflet默认的关闭按钮DOM结构即可。

方案2：需要保留关闭按钮（全局生效） #

在地图初始化前，重写Popup原型的布局初始化方法，给关闭按钮追加阻止默认事件的逻辑，一次配置对所有popup生效：

const originalInitLayout = L.Popup.prototype._initLayout;
L.Popup.prototype._initLayout = function() {
  originalInitLayout.call(this);
  // 拦截a标签默认锚点跳转
  this._closeButton.addEventListener('click', e => e.preventDefault());
};

方案3：单popup实例局部修复 #

如果不想全局修改配置，可以在绑定popup时监听popupopen事件，单独给当前popup的关闭按钮做事件拦截：

target.bindPopup(content, {
    closeOnClick: false,
    closeButton: true, // 需显示关闭按钮时开启
    autoClose: true,
    closePopupOnClick: true
}).on('popupopen', (e) => {
    const closeBtn = e.popup._closeButton;
    closeBtn?.addEventListener('click', ev => ev.preventDefault());
}).openPopup();

内容的提问来源于stack exchange，提问作者Fatih Doğan