Leaflet.Editable如何防止点击地图控件时触发多边形顶点绘制

问题原因 #

该问题由事件冒泡导致：
Leaflet.Editable启动多边形绘制后，会监听地图容器的点击事件来新增顶点。Leaflet官方自带的缩放、版权信息等控件内部已经默认阻止了点击事件向上冒泡到地图容器，因此点击不会触发绘制；但你自定义的EasyButton、自定义控件没有做冒泡拦截，点击时事件会传递到地图层，进而误触发顶点添加。

解决方法 #

方法1：逐个给自定义控件添加事件拦截（推荐，可控性高） #

不需要修改现有控件的业务逻辑，只需给控件的DOM元素添加事件冒泡阻止即可，不会影响控件本身的点击功能：

处理EasyButton

const homeBtn = L.easyButton('fa-home',function(btn,map){
  map.setView(initialCenter,initialZoom);
},'Domů').addTo(map);
// 阻止按钮的点击类事件冒泡到地图
L.DomEvent.on(homeBtn.button, 'click mousedown dblclick mouseup', L.DomEvent.stopPropagation);

处理自定义控件

在自定义控件的onAdd方法中，给创建的DOM元素添加事件拦截：

overviewMap.onAdd = function (map) {
  divOverviewMap = L.DomUtil.create('div', 'prehledka');
  // 新增事件拦截
  L.DomEvent.on(divOverviewMap, 'click mousedown dblclick mouseup', L.DomEvent.stopPropagation);
  return divOverviewMap;
};
overviewMap.addTo(map);

var prehledkaButton=L.control({position: 'bottomleft'});
prehledkaButton.onAdd = function (prehledkaMap) {
  divOverviewMapButton = L.DomUtil.create('div', 'prehledkaButton');
  divOverviewMapButton.innerHTML='<img src="toggle.png" class="toggleButton">';
  $(divOverviewMapButton).attr('title','Skrýt přehledku...');
  // 新增事件拦截
  L.DomEvent.on(divOverviewMapButton, 'click mousedown dblclick mouseup', L.DomEvent.stopPropagation);
  return divOverviewMapButton;
};
prehledkaButton.addTo(prehledkaMap);

方法2：全局统一拦截所有Leaflet控件的事件 #

如果自定义控件数量较多，不想逐个修改，可以直接给所有携带leaflet-control类的元素（所有Leaflet控件默认都会添加该类）统一添加事件拦截：

// 地图初始化完成、所有控件添加完毕后执行
document.querySelectorAll('.leaflet-control').forEach(controlEl => {
  L.DomEvent.on(controlEl, 'click mousedown dblclick mouseup', L.DomEvent.stopPropagation);
});

注意：不要拦截mousemove、mouseover这类非点击事件，避免影响控件的悬停样式、拖拽等原生交互。

内容的提问来源于stack exchange，提问作者daniel.vrbik