防止点击事件传播/冒泡到Google地图上 [英] Prevent click event from propagating/bubbling onto Google Maps

问题描述

我使用Google Maps API V3的MarkerClusterer资料库将附近的标记分组到单个标记中。当用户点击群集标记时，div会出现在群集标记旁边。现在我想让它在点击群集标记后关闭弹出的div，他可以点击地图。

问题： 在地图上添加 google.maps.event.addListener（地图，'点击'，功能（）{}），当用户点击群集标记打开弹出的div，什么也没有发生！我猜集群标记上的点击事件会导致div弹出，但点击事件也会传播到地图，触发地图的点击侦听器关闭弹出窗口。

我希望我可以使用jQuery的 event.stopPropagation（）但我可以在哪里获得事件对象？

我该如何解决这个问题？如何防止点击通过群集标记传播到地图？希望这个解决方案是跨浏览器兼容的。

JS代码

  clusterclickListener = google.maps.event.addListener（mc，clusterclick，function（cluster）{
 $（'＃content_container'）。show（）; 
}） ; 
 
 google.maps.event.addListener（map，'click'，function（）{
 $（'＃content_container'）。hide（）; 
}）; 
  

解决方案

嗯。我只是测试了这一切，一切都适合我。我唯一的建议是检查你的div是否有正确的html / css /定位，因为它可能只是被地图覆盖。

事件对象在处理函数中默认是可访问的。如果你想访问事件对象，你可以简单地使用事件来访问它，所以event.stopPropagation（）应该工作。请记住，如果您将事件作为参数传递给处理函数，您将得到一个不带stopPropagation方法的自定义Google地图点击事件。

I am using the MarkerClusterer library for Google Maps API V3 to group nearby markers into a single marker. When the user clicks on the cluster marker, a div appears beside that cluster marker. Now I want to make it such that after clicking on the cluster marker, to close the div that popped up, he can click on the map.

Problem: After adding a google.maps.event.addListener(map, 'click', function(){}) on the map, when the user clicks on the cluster marker to open the popup div, nothing happens!! I'm guessing the click event on the cluster marker caused the div to popup, but the click event also propagated to the map, triggering the map's click listener to close the popup.

I wish i can use jQuery's event.stopPropagation() but where can I get the event object?

How can I solve this problem? How can I prevent the click from propagating through the cluster marker to the map? Hopefully the solution is cross-browser compatible.

JS Code

clusterclickListener = google.maps.event.addListener(mc, "clusterclick", function (cluster) {
    $('#content_container').show();
});

google.maps.event.addListener(map, 'click', function() {
    $('#content_container').hide(); 
});

解决方案

Hmm. I just tested this and everything works for me. My only advice is to check if your div has correct html/css/positioning as it may simply be covered up by a map.

Event object is accessible by default in the handler function. If you want to access the event object you can simply access it using "event" so event.stopPropagation() should work. Keep in mind that if you pass "event" as an argument to the handler function you will get a custom Google maps click event which does not have stopPropagation method.

这篇关于防止点击事件传播/冒泡到Google地图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！