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

【问题标题】：React-leaflet. Stop propagation when click on a drawn polygon反应传单。单击绘制的多边形时停止传播
【发布时间】：2018-06-07 08:33:06
【问题描述】：



<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 在地图上绘制多边形。我想点击绘制的多边形来做一些事情。但是我发现在多边形和地图上都触发了单击事件（_onClick 和 _onMapClick 都触发了。）。我能做些什么来防止传播？

【问题讨论】：

标签： react-leaflet leaflet.draw

【解决方案1】：

在使用开发工具进行一些调试后，我能够解决这个问题。

我必须调用 Leaflet 对象中的 stopPropagation()。

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

【讨论】：

【解决方案2】：

你的两个事件处理程序都会得到一个事件，检查事件的目标，如果它是一个多边形，任何其他 react-leaflet-draw 层你可以在 _onMapClick 中阻止它

类似的东西（伪代码）

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

【讨论】：

感谢亚历克斯的热心帮助。但不幸的是，它不起作用。发生错误：未捕获类型错误：e.stopPropagation 不是函数

【解决方案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}>
...

【讨论】：