Реагировать-листовка.Остановить распространение, когда нажмете на нарисованный многоугольник

Question

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><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>

Я использую реактив-листовка и реактив-листовка-розыгрыш для рисования многоугольника на карте.Я хочу нажать на нарисованный многоугольник, чтобы что-то сделать.Но я обнаружил, что событие щелчка сработало как на полигоне, так и на карте (оба _onClick и _onMapClick сработали).Что я могу сделать, чтобы предотвратить распространение?

Answer 1

Мне удалось решить эту проблему после небольшой отладки с помощью инструментов разработчика.

Мне пришлось вызвать stopPropagation (), который содержится в объекте Leaflet.

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

Answer 2

Оба ваших обработчика событий получат событие, проверит цель события и, если это многоугольник, любой другой слой реагирования-листовки, вы можете предотвратить его внутри _onMapClick

, так что-то вроде этого (псевдокод)

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