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

时间:2013-09-04 08:05:21

标签: javascript leaflet

在我们的一个项目中,我们使用LeafletLeaflet.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源内的默认侦听器会在我单击地图时保持其调用。我错过了什么吗?

6 个答案:

答案 0 :(得分:21)

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

下面的代码片段是将函数绑定到click事件的示例。

map.on('click', doSomething);

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

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

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

答案 1 :(得分:0)

你有这样的用途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

答案 2 :(得分:0)

最后,我已经通过手动删除调用click方法的默认_collapse()处理程序解决了这个问题,据我所知。很脏,但它确实有效。

答案 3 :(得分:0)

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

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

  L.DomEvent.disableClickPropagation(el);

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

我知道这个答案要晚得多了,但是就像在jquery中一样,您可以使用.off

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

它对任何传单事件都适用。

我仅将它用于'zoomend'事件的触发一次。

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