谷歌地图的双击事件传播 [英] Google Map's Double Click Event Propagation

问题描述

<块引用>

这个问题经常被问到，但从来没有真正得到很好的回答.让我们看看我们是否可以解决它！

事件传播

Google 允许您通过他们的 API 使用 事件处理程序.p>

有时您可能会将您的事件处理程序绑定到 Google本身 已经绑定到的事件.因此，当您的事件触发并执行您让它执行的任何操作时，您可能会发现 Google 同时也在做自己的小事.

<块引用>

嗯，我可以处理该事件以使我的代码运行，但阻止该事件继续并触发 Google 的事件处理程序吗?

你当然可以！欢迎使用 Event Propagation(又名事件冒泡).

看看这段代码

这里我绑定了一个事件处理程序来双击谷歌地图:

var aListener = google.maps.event.addListener(map, 'dblclick', function(event) {//尽量防止事件传播到地图事件.stop();event.cancelBubble = true;if (event.stopPropagation) {event.stopPropagation();}if (event.preventDefault) {event.preventDefault();} 别的 {event.returnValue = 假；}});

这里 map 是要绑定到的 Google Map 对象.

这不起作用.事件冒泡，地图放大.我不知道为什么.

<块引用>

你问，你读过文档吗?

确实如此.documentation 说要使用 event.stop();

我看过其他人在说什么.这个问题正是我的问题.它被标记为已修复，但解决方案不起作用.

想法?

解决方法

双击事件的一种可能解决方法是在您需要它不触发时禁用 Google 的默认行为，然后稍后重新启用它.

您可以使用 disableDoubleClickZoom 参数来执行此操作.请参阅此处的文档.

这里有一些代码可以禁用:

map.set("disableDoubleClickZoom", true);

现在重新启用:

map.set("disableDoubleClickZoom", false);

当然，您可以在 MapOptions 参数中设置属性，以便首先创建 map 对象.

解决方案

更新: 不幸的是，我不得不发现 Firefox 无法通过以下方式访问当前事件window.event 因此此代码在那里不起作用.我还没有找到解决方法.

<小时>

事实证明，对代码的修复很少:只需从事件处理函数中删除 event 参数，从而访问处理程序内的全局 window.event 对象.

以下示例代码在 IE 和 Chrome 中适用于我，但 不适用于 Firefox:

google.maps.event.addListener(map, "dblclick", function(googleMapsEvent) {console.debug("抓到双击");//引用全局事件对象//忽略谷歌地图传入的 googleMapsEvent！event.preventDefault();});

这个答案让我走上了正轨！

This question is asked often, but never really answered well. Let's see if we can remedy it!

Event Propagation

Google allows you to bind to events in a Google Map View via their API using event handlers.

Sometimes you may bind your event handler to an event that Google itself is already bound to. Thus, when your event fires and does whatever you told it to do you may find Google also doing its own little thing at the same time.

Hmm, can I handle the event so my code runs, but stop the event from continuing on and firing Google's event handler?

You sure can! Welcome to Event Propagation (aka Event Bubbling).

Take a look at this code

Here I bind an event handler to double clicking on the Google Map:

var aListener = google.maps.event.addListener(map, 'dblclick', function(event) {
    // Try to prevent event propagation to the map
    event.stop();
    event.cancelBubble = true;
    if (event.stopPropagation) {
        event.stopPropagation();
    }
    if (event.preventDefault) {
        event.preventDefault(); 
    } else {
        event.returnValue = false;  
    }
});

Here map is a Google Map object to bind to.

This doesn't work. The event bubbles, and the map zooms in. I don't know why.

You ask, have you read the documentation?

Indeed. The documentation says to use event.stop();

I have looked at what others are saying. This issue is exactly my problem. It was marked as fixed, but the solution does not work.

Ideas?

Workaround

A possible workaround for the doubleclick event is to disable Google's default behavior when you need it to not fire, and then re-enable it later.

You do this with the disableDoubleClickZoom argument. See the documentation here.

Here is some code to disable:

map.set("disableDoubleClickZoom", true);

Now to re-Enable:

map.set("disableDoubleClickZoom", false);

Of course, you can set the property in the MapOptions argument for when the map object is created in the first place.

解决方案

UPDATE: Unfortunately, I had to find out that Firefox does not make the current event accessible via window.event thus this code won't work there. I haven't found a workaround for that, yet.

---

It turns out the fix to your code is minimal: just remove the event parameter from your event handler function, thus accessing the global window.event object inside the handler.

The following example code worked for me in IE and Chrome, but not Firefox:

google.maps.event.addListener(map, "dblclick", function(googleMapsEvent) {
    console.debug("caught double click");
    // reference the global event object
    // ignore the googleMapsEvent passed in by Google Maps!
    event.preventDefault();
});

This answer put me on the right track!

这篇关于谷歌地图的双击事件传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！