停止在Leaflet中传播'click'事件

问题描述 投票:0回答:7

在我们的一个项目中,我们使用

Leaflet
以及
Leaflet.markercluster
插件。查看
Leaflet
的来源,我发现它将
_collapse()
函数附加到地图的
click
事件中,因此每当我单击地图时,它都会收缩之前扩展的集群。
现在,我想禁用此行为。如果集群已扩展,那么我只想取消选择
click
事件上的所有标记(并且不收缩集群本身)。这是我的代码片段:

map.on('click', function(e) {
    scope.deselectAllMarkers();
});

我尝试在此单行回调的末尾添加以下几行,以停止

click
事件的传播:

scope.L.DomEvent.stopPropagation(e);

scope.L.DomEvent.preventDefault(e);

scope.L.DomEvent.stop(e);

scope.L.DomEvent.stopPropagation(e.originalEvent);

scope.L.DomEvent.preventDefault(e.originalEvent);

scope.L.DomEvent.stop(e.originalEvent);

但它们都不起作用。每当我单击地图时,隐藏在

Leaflet
源内部的默认侦听器都会保留其调用。我是不是错过了什么?

javascript leaflet
7个回答
31
投票

我知道这个答案已经很晚了,但是如果有人对解决方案感兴趣,这就是我解决它的方法。

下面的代码片段是将函数绑定到

click
事件的示例。

map.on('click', doSomething);

实际上,在检查了leaflet的API和一些极客调试之后,似乎事件返回一个对象,而不是事件本身。事件本身被包装到返回对象内的一个字段中。

var doSomething = function(map) {
    // stop propagation
    map.originalEvent.preventDefault();
};

使用上面的代码片段时,事件冒泡已停止,这是我想要的,也可能是您想要的。


4
投票

我知道这个答案已经很晚了,但是就像在jquery中一样,你可以使用

.off

map.on('click', doSomething);
map.off('click');

它适用于任何传单活动。

我用它来仅触发一次

'zoomend'
事件。

map.on('moveend', function(e){
    console.log("any code");
    map.off('moveend');
});

3
投票

这个对我有用......

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}

感谢https://gis.stackexchange.com/questions/104507/disable-panning-dragging-on-leaflet-map-for-div-within-map


0
投票

您无法覆盖事件处理程序的事件传播。页面加载后,您需要使用内置的 Leaflet 助手,如下所示:

$('.element').each (i,el)->

  L.DomEvent.disableClickPropagation(el);

0
投票

只有这个对我有用

L.DomEvent.stopPropagation(event);

-1
投票

最后,据我所知,我通过手动删除调用

click
方法的默认
_collapse()
处理程序解决了这个问题。很脏,但它确实起到了作用。


-3
投票

你有这样的用途

event.stopPropagation()

map.on('click', function(e) {  //don't forget to pass this 'e' event parameter
    e.preventDefault();
    scope.deselectAllMarkers();        
    e.stopPropagation();
    return false;     
});

尝试其中任何一个

1.

event.stopPropagation()

2.
event.preventDefault()

3.
return false

© www.soinside.com 2019 - 2024. All rights reserved.