Как предотвратить возникновение событий на дочернем элементе карты React-Leaflet

Question

У меня есть React-Leaflet карта, которую я отрисовываю div внутри.

По какой-то причине взаимодействие с содержимым div вызывает реакцию карты внизу (например: двойной щелчок увеличит карту, перетаскивание будет панорамировать карту) - даже когда я вызываю e.stopPropagation() в подключенных обработчиках до див.

Насколько я понимаю, вызов stopPropagation() должен помешать событиям DOM достичь самой карты.

Почему кажется, что stopPropagation() игнорируется?

Как я могу визуализировать div внутри карты без событий, связанных с самой картой?

Вот пример кода , показывающий проблему.

import { Map, TileLayer } from 'react-leaflet';

const MyMap = props => (
  <Map zoom={13} center={[51.505, -0.09]}>
    <TileLayer url={"http://{s}.tile.osm.org/{z}/{x}/{y}.png"} />

    {/* 
          HOW do I get this div to NOT pass it's events down to the map?!?! 
          Why does e.stopPropagation() appear to not work?
    */}
    <div 
      id="zone"
      onClick={e => e.stopPropagation()}
      onMouseDown={e => e.stopPropagation()}
      onMouseUp={e => e.stopPropagation()}
    >
      <p>Double-click or click and drag inside this square</p>
      <p>Why does the map zoom/pan?</p>
    </div>

  </Map>
);

ReactDOM.render(<MyMap />, document.getElementById('root'));

Answer 1

Для карты Leaflet используйте L.DomEvent.disableClickPropagation вместо которого:

Добавляет stopPropagation к элементу 'click', 'doubleclick', 'mousedown' и 'touchstart' события.

Пример

function MyMap() {
  return (
    <div>
      <Map zoom={13} center={[51.505, -0.09]}>
        <TileLayer url={"http://{s}.tile.osm.org/{z}/{x}/{y}.png"} />
        <MyInfo />
      </Map>
    </div>
  );
}

, где

function MyInfo() {
  const divRef = useRef(null);

  useEffect(() => {
    L.DomEvent.disableClickPropagation(divRef.current);
  });

  return (
    <div ref={divRef} id="zone">
      <p>Double-click or click and drag inside this square</p>
      <p>Why does the map zoom/pan?</p>
    </div>
  );
}

Обновлен код ручки

Альтернативный вариант

Другим вариантом остановки распространения элемента div на события карты может быть размещение div вне элемента карты:

<div>
  <Map zoom={13} center={[51.505, -0.09]}>
    <TileLayer url={"http://{s}.tile.osm.org/{z}/{x}/{y}.png"} />
  </Map>
  <MyInfo />
</div>

, где

function MyInfo() {
  return (
    <div id="zone">
      <p>Double-click or click and drag inside this square</p>
      <p>Why does the map zoom/pan?</p>
    </div>
  );
}