如何防止 React-Leaflet Map 子节点上的事件冒泡

Question

我有一张 React-Leaflet 地图，我正在里面渲染 div。

出于某种原因，与 div 的内容交互会导致下面的地图做出响应（例如：双击会缩放地图，拖动会平移地图）- 即使我正在调用e.stopPropagation() 在附加到 div 的处理程序中。

据我了解，调用 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 而不是：

Adds stopPropagation to the element's 'click', 'doubleclick', 'mousedown' and 'touchstart' events.

例子

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>
  );
}

Updated codepen

备选方案

阻止 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>
  );
}

如何防止 React-Leaflet Map 子节点上的事件冒泡

How to prevent event bubbling on child of React-Leaflet Map

javascript

dom

leaflet

reactjs

react-leaflet