javascript 停止在传单中传播“点击”事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18608509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop propagation of 'click' event in Leaflet
提问by aga
In one of our projects we're using Leafletalong with Leaflet.markerclusterplugin. Looking through the Leaflet's sources I found that it appends _collapse()function to the map's clickevent, so whenever I click on the map it contracts previously expanded cluster.
Now, I want to disable this behavior. If the cluster is expanded, then I just want to deselect all of its markers on clickevent (and don't contract the cluster itself). Here is the piece of my code:
在我们的一个项目中，我们Leaflet与Leaflet.markercluster插件一起使用。查看Leaflet的来源，我发现它将_collapse()函数附加到地图的click事件中，因此每当我单击地图时，它都会收缩先前扩展的集群。
现在，我想禁用此行为。如果集群被扩展，那么我只想在click事件上取消选择它的所有标记（并且不要收缩集群本身）。这是我的一段代码：
map.on('click', function(e) {
scope.deselectAllMarkers();
});
I tried to add the following lines in the end of this one-line callback in order to stop propagation of clickevent:
我试图在这个单行回调的末尾添加以下几行，以停止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);
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);
And none of them works. Default listener which is hidden inside of the Leafletsources keeps its invocation whenever I click on the map. Am I missing something?
它们都不起作用。Leaflet每当我单击地图时，隐藏在源中的默认侦听器都会保持其调用。我错过了什么吗？
采纳答案by aga
In the end I've solved the issue by manual removal of default clickhandler which was invoking the _collapse()method, as far as I remember. Dirty, but it did the trick.
最后，据我所知，我通过手动删除click调用该_collapse()方法的默认处理程序解决了这个问题。脏，但它成功了。
回答by KarelG
I know that this answer is quite late, but if someone is interested in a solution, here is how i have solved it.
我知道这个答案已经很晚了，但是如果有人对解决方案感兴趣，这就是我解决它的方法。
This snippet here below is an example of binding a function to the clickevent.
下面的这个片段是将函数绑定到click事件的示例。
map.on('click', doSomething);
Actually, after checking leaflet's APIand some geekish debugging, it seems that the event returns an object, not the event itself. The event itself is wrapped into a field within the returned object.
实际上，在检查了传单的 API和一些极客调试之后，似乎该事件返回的是一个对象，而不是事件本身。事件本身被包装到返回对象中的一个字段中。
var doSomething = function(map) {
// stop propagation
map.originalEvent.preventDefault();
};
When using the above snippet, the event bubbling has stopped, something which i wanted, and probably what you wanted.
使用上面的代码片段时，事件冒泡已经停止，这是我想要的，也可能是您想要的。
回答by Praveen
You have use like this event.stopPropagation()
你有这样的用法 event.stopPropagation()
map.on('click', function(e) { //don't forget to pass this 'e' event parameter
e.preventDefault();
scope.deselectAllMarkers();
e.stopPropagation();
return false;
});
Try anyone of this
试试这个
1.event.stopPropagation()
2.event.preventDefault()
3.return false
1. event.stopPropagation()
2. event.preventDefault()
3.return false
回答by Dhrumil Bhankhar
This one worked for me...
这个对我有用...
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);
}
回答by picardo
You can't override the event propagation from an event handler. You need to use the builtin Leaflet helper after the page has loaded, like this:
您不能从事件处理程序覆盖事件传播。您需要在页面加载后使用内置的 Leaflet 助手，如下所示：
$('.element').each (i,el)->
L.DomEvent.disableClickPropagation(el);
