我有一个React-Leaflet地图,我在里面呈现了一个div
。
不知何故,与
的内容交互会导致位于下方的地图产生反应(例如:双击将缩放地图,拖动将平移地图) - 即使我在附加到
的处理程序中调用
e.stopPropagation()
。
据我所知,调用stopPropagation()
应该防止DOM事件到达地图本身。
为什么看起来stopPropagation()
被忽略了?
如何渲染地图内部的
,而不让它的事件冒泡到地图本身?
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'));
e.stopPropagation()
不起作用。如果这些事件没有从 div 上传递,Leaflet 是如何接收这些事件的? - Alex McMillanZoomIn
控件)注册click
事件处理程序执行了一些额外的步骤。仅为div元素注册stopPropagation
并不能阻止Leaflet控件的点击事件触发(这就是地图缩放的原因)。 - Vadim GremyachevL 未定义
。 - Tek Kshetriimport L from 'leaflet';
可以翻译为:“从'leaflet'导入L。” - teddybearduseEffect
中,ref可能为null(因此会抛出诸如“无法读取null的属性('_leaflet_events')”之类的错误)。最好在分配时处理它,例如:ref={(ref) => {if (!ref) return; L.DomEvents.disableClickPropagation(ref); }}
。我已用我的解决方案回答了这个问题。 - Fappaz