Question



<Map center={center} zoom={13} onClick={this._onMapClick}>
    <FeatureGroup color="purple" onClick={this._onClick}>
      <EditControl
          position='topright'
          draw={{
              rectangle: false,
              polyline: false,
              circle: false,
              marker: false,
              circlemarker: false
          }}
    />
</Map>

我使用 react-leaflet 和 react-leaflet-draw 在地图上绘制多边形。我想点击绘制的多边形来做某事。但我发现在多边形和地图上都触发了click事件（_onClick和_onMapClick都被触发了）。我该怎么做才能防止传播？

Answer 1

你的两个事件处理程序都会得到一个事件，检查事件的目标，以及它是否是一个多边形，任何其他反应 - 传单 - 绘制层你可以在_onMapClick

中阻止它

所以类似的东西（伪代码）

_onMapClick(e){
   var layer = e.target;
   if(layer == Your Draw Layer){
    e.preventDefault();
    e.stopPropagation();
  }
}

Answer 2

使用开发人员工具进行一些调试后，我能够解决此问题。

我不得不调用Leaflet对象中包含的stopPropagation（）。

_onClick(e){
  e.originalEvent.view.L.DomEvent.stopPropagation(e)
}

Answer 3

您可以使用：

DomEvent.disableScrollPropagation 禁用滚动传播
DomEvent.disableClickPropagation 禁用点击传播

示例：

const divContainer = useRef<HTMLDivElement>(null);
useEffect(() => {
    if(divContainer.current) {
        DomEvent.disableClickPropagation(divContainer.current);
        DomEvent.disableScrollPropagation(divContainer.current);
    }
});
...
return (
    <div ref={divContainer}>
...

反应小叶。单击绘制的多边形时停止传播

3 个答案: