如何防止事件在React-Leaflet Map的子对象上冒泡 [英] How to prevent event bubbling on child of React-Leaflet Map

问题描述

我有一个反应传单地图，我正在渲染 div 里面.

I have a React-Leaflet map which I am rendering a div inside.

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

For some reason, interacting with the contents of the div causes the map beneath to respond (eg: double-clicking will zoom the map, dragging will pan the map) - even when I'm calling e.stopPropagation() in handlers attached to the div.

据我了解，调用 stopPropagation()应该可以防止DOM事件到达地图本身.

As I understand it, calling stopPropagation() should prevent the DOM events from ever reaching the map itself.

为什么似乎会忽略 stopPropagation()?

我如何在地图内渲染div 而不会使事件冒泡到地图本身?

How can I render a div inside the map without it's events bubbling to the map itself?

这是示例Codepen ，显示了问题所在.

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

推荐答案

对于传单地图，请使用

For Leaflet map use L.DomEvent.disableClickPropagation instead which:

将 stopPropagation 添加到元素的'click'，'doubleclick'，'mousedown'和'touchstart'事件.

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

更新的代码笔

替代选项

阻止div元素传播到地图事件的另一种方法是将div 放在外部:

Another option to stop div element from propagation to map events would be to place div outside of the map element:

<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的子对象上冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！