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

问题描述

这个问题经常被询问，但从来没有真正回答过。让我们看看是否可以补救！

事件传播

Google 可让您通过 API 绑定到Google地图视图中的活动a>使用事件处理程序。

有时您可能会将事件处理程序绑定到Google 本身已绑定的事件。因此，当你的事件触发并且做任何事情你可能会发现Google也可以在同一时间做自己的小事情。

<强>你肯定可以！欢迎来到事件传播（又称事件冒泡）。

看看这段代码

这里我绑定一个事件处理程序来双击Google Map：

  var aListener = google.maps.event.addListener（map，'dblclick'，function（event）{
 //尝试防止事件传播到地图
 event.stop（）; 
 event.cancelBubble = true; 
 if（event.stopPropagation）{
 event.stopPropagation（）; 
} 
 if（event.preventDefault）{
 event.preventDefault（）; 
} else {
 event.returnValue = false; 
} 
}）; 
  

这里地图是Google Map对象绑定到。

这不起作用。事件气泡和地图放大，我不知道为什么。

你问，你是否阅读了文档？ p>

的确。 文档说使用 event.stop（ ）;

我已经看了别人在说什么。 这个问题正是我的问题。它被标记为固定，但解决方案不起作用。

想法？

解决方法

双击事件的一个可能的解决方法是在需要不启动时禁用Google的默认行为，然后稍后重新启用。

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

这是一些禁用代码：

  map.set（disableDoubleClickZoom，true）; 
  

现在重新启用：

  map.set（disableDoubleClickZoom，false）; 
  

当然，您可以在 MapOptions c $ c> c $ c>对象的参数首先被创建。

解决方案

更新：不幸的是，我不得不发现， Firefox 不会通过 window.event 因此这个代码不会在那里工作。我没有找到解决方法，但是。

---

事实证明，你的代码的修复是最小的：just从事件处理函数中删除事件参数，从而访问处理程序内的全局 window.event p>

以下示例代码在IE和Chrome中为我工作，但不是Firefox ：

  google.maps.event.addListener（map，dblclick，function（googleMapsEvent）{
 console.debug（catch double click）; 
 //引用全局事件对象
 //忽略Google Maps传递的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!

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