Leaflet中点击特定图层与地图触发不同事件的问题

在Leaflet中，直接调用原生事件的preventDefault()无法阻止内部事件流的传播——因为图层和地图的click事件是Leaflet自身事件系统管理的，并非原生DOM的事件冒泡逻辑。正确的做法是使用Leaflet事件对象提供的stopPropagation()方法，终止事件向上传递到地图层级。

修改你的代码如下：

this.map.on('click', (event) => {
    console.log('map clicked')
})

this.boundaryLayer = L.geoJSON().addTo(this.map);
this.boundaryLayer.on('click', (event) => {
    console.log('boundary clicked', event);
    // 用Leaflet事件对象的方法阻止事件传播到地图
    event.stopPropagation();
});

补充说明 #

• 若图层上绑定了多个同类型事件（比如多个click监听器），想要阻止后续同类型事件执行，可以使用event.stopImmediatePropagation()。
• 主流版本的Leaflet均支持上述事件控制方法。

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