Google Maps Api V3：点击事件触发两次答案

【问题标题】：Google Maps Api V3: click event firing twiceGoogle Maps Api V3：点击事件触发两次
【发布时间】：2011-09-23 07:49:38
【问题描述】：

我正在关注此页面中的 MVCObject 绑定示例：

http://code.google.com/apis/maps/articles/mvcfun.html

我想在用户点击圆圈时改变圆圈的颜色并切换标记的可见性，所以我将监听器添加到RadiusWidget构造函数中，如下所示：

function RadiusWidget() {
    var circle = new google.maps.Circle({
      strokeWeight: 2
    });

    this.set('distance', 50);
    this.bindTo('bounds', circle); 
    circle.bindTo('center', this);
    circle.bindTo('map', this);
    circle.bindTo('radius', this);
    this.addSizer_();

    google.maps.event.addListener(circle, 'click', function()
    {
       alert('circle clicked'); 
    });
  }

我的问题是点击事件触发了两次。有谁知道为什么？

【问题讨论】：

会不会是事件先被map本身拦截，然后也传递给circle对象呢
有没有办法检查监听函数是从哪里调用的？

标签： javascript google-maps-api-3 dom-events

【解决方案1】：

我遇到了类似的问题。这可能是地图 API v3 中的错误吗？我没有答案，但有一个解决方法：

google.maps.event.addListener(circle, 'click', function(event) {       
    if (event.alreadyCalled_) {
        alert('circle clicked again'); 
    }
    else {
        alert('circle clicked first time');      
        event.alreadyCalled_ = true;
    }
});

点击仍然触发了两次，但您可以检测到它。

【讨论】：

不太喜欢变通办法，但由于它总是触发两次，我想它可以工作。
就我而言，在 android 4.1.2 中使用 PhoneGap 包装谷歌地图，我必须选择 setTimeout
我很想看到@lowzhien 完整的地图初始化。我在draggable:false 地图上遇到了这个问题。
似乎不适用于mouseup 事件，它也奇怪地触发了两次。

【解决方案2】：

似乎地图 API 在原始点击事件触发后触发了额外的“点击”事件。防止我通过调试发现的最合适的方法；

google.maps.event.addListener(marker, 'click', function(event) {
    console.log(event);  //see console for original mouse event     
    var ev = event.b;  //event.b object is original mouse event and might change

    //prevent defualts
    ev.preventDefault();
    ev.stopPropagation();
});

这将正确阻止第二次触发。

【讨论】：

【解决方案3】：

您在地图上还有其他点击侦听器吗？尝试使用mouseEvent.stop()，这样它就不会传播到地图。 documentation here

   google.maps.event.addListener(circle, 'click', function(mev) {
           mev.stop();
           alert('circle clicked'); 
   });

可能是线

 circle.bindTo('map', this);

导致它。

【讨论】：

【解决方案4】：

这对我有用：

google.maps.event.addListener(circle, 'click', function (e) {
    clearTimeout(this.doNotTriggerTwiceTimeout);
    this.doNotTriggerTwiceTimeout = setTimeout(function(){
        alert('circle clicked');
    }, 100);
});

【讨论】：

【解决方案5】：

要真正找出调用函数的原因，请使用 console.log(event) 并检查开发人员工具控制台：

google.maps.event.addListener(circle, 'click', function()
{
    alert('circle clicked');
    console.log(event);
});

您应该列出 2 个事件（如果它们确实触发了两次）。然后检查事件的“srcElement”属性，看看是什么元素调用了该函数。

从我自己的一个类似问题中，我发现 Google 地图事件侦听器对于触发该函数的元素不够具体。因此，我将 Google maps 事件侦听器替换为 JQuery 事件侦听器，使其更加具体，并通过其 ID 属性定位特定元素。

Google 地图事件监听器（触发两次）

google.maps.event.addDomListener(control, 'click', function() { toggleLabels(); });

JQuery 事件监听器（触发一次）

$('body').on('click', '#labels-switch', function(){ toggleLabels(); });

【讨论】：