Leaflet Draw绘制图形后点击外部误删问题求助

问题背景 #

基于Laravel开发Leaflet应用，通过Leaflet Draw实现多边形、矩形、圆形绘制功能：绘制完成后点击图形可弹出带「Descargar（下载GeoJSON文件）」和「Mapa Filtrado（筛选地图）」的弹窗，该功能正常。但存在异常：首次绘制后点击地图外部可删除图形并生成标记弹窗，后续绘制时，图形尚未闭合就被误删。尝试过通过draw:drawstart/draw:drawstop事件切换布尔flag标记，以及调用stopPropagation()阻止事件冒泡，均未解决问题。

排查与解决思路 #

1. 检查点击删除事件的绑定逻辑 #

• 排查你绑定的地图点击删除事件是否在首次删除后未正确解绑：如果是通过map.on('click', ...)绑定的删除逻辑，首次执行后未移除监听，会导致后续绘制过程中的地图点击（包括绘制操作的点击）都触发删除。
• 修复方案：仅在图形存在时绑定删除事件，图形删除后立即解绑；或者在绘制开始时临时禁用删除事件，绘制结束后再恢复。

2. 利用Leaflet Draw的状态判断避免冲突 #

• Leaflet Draw在绘制过程中会激活对应的工具模式，可通过drawControl._toolbars.draw._activeMode判断当前是否处于绘制状态，在删除逻辑中先做校验：

map.on('click', function(e) {
  // 判断是否有绘制工具正在激活
  const isDrawing = drawControl._toolbars.draw._activeMode !== null;
  if (isDrawing) return;
  
  // 执行你的图形删除逻辑
  removeDrawnElements();
});

3. 修正flag标记的状态切换逻辑 #

• 检查draw:drawstart/draw:drawstop事件的触发时机是否覆盖所有场景：比如用户取消绘制时会触发draw:drawcancel事件，若未监听该事件，会导致flag状态错误。
• 补充事件监听确保flag状态准确：

let isDrawing = false;

map.on('draw:drawstart', () => {
  isDrawing = true;
});
// 同时监听绘制结束和取消事件
map.on('draw:drawstop draw:drawcancel', () => {
  isDrawing = false;
});

// 删除逻辑中加入判断
map.on('click', function(e) {
  if (isDrawing) return;
  // 执行删除操作
});

4. 彻底阻止事件冒泡（针对全局点击删除逻辑） #

• 如果你的删除逻辑绑定在document/body层面，仅在map内调用stopPropagation()无法阻止全局事件触发。可在绘制开始时添加全局事件拦截：

function blockDelete(e) {
  e.stopPropagation();
  e.preventDefault();
}

map.on('draw:drawstart', () => {
  // 在捕获阶段阻止全局点击事件
  document.addEventListener('click', blockDelete, true);
});

map.on('draw:drawstop draw:drawcancel', () => {
  document.removeEventListener('click', blockDelete, true);
});

5. 检查版本兼容性 #

• 确认Leaflet与Leaflet Draw的版本是否兼容，部分旧版本存在绘制过程中事件冲突的bug。尝试升级到最新稳定版（Leaflet 1.9.x + Leaflet Draw 1.0.x），验证问题是否消失。

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