如何阻止 Overlay mousedown 事件进入地图？答案

【问题标题】：How can I stop Overlay mousedown event from going to map?如何阻止 Overlay mousedown 事件进入地图？
【发布时间】：2013-01-18 13:51:48
【问题描述】：

在覆盖层（ExtInfoWindow）上处理 mousedown 事件后，我需要确保地图点击事件处理程序不执行，或者在地图点击事件处理程序中，我需要确定事件来自覆盖点击，而不是处理它。所以，某种方式我不需要处理两次。我在下面做错了什么？它用于 ExtInfoWindow 库，所以我不会在这里发布整个内容。 Page with map is here。点击信息窗口。在extinfowindow.js 中搜索“console.log”以查看问题所在。

  // Initialization:

  var stealEvents = ['mousedown', 'dblclick', 'DOMMouseScroll', 'onmousewheel'];
  for( i=0; i < stealEvents.length; i++ ){
        google.maps.event.addDomListener(this.container_, stealEvents[i], this.onClick_.bind(this));
  }



    if (map.ClickListener_ == null) {
      //listen for map click, close ExtInfoWindow if open
      map.ClickListener_ = google.maps.event.addListener(map, 'click',
        function(event) {
            if( map.getExtInfoWindow() != null ){
                    // problem: This executes even if the click is on the overlay!
                map.closeExtInfoWindow();
            }
            }
      );
    }


// overlay click event handler
ExtInfoWindow.prototype.onClick_ = function(e) {
   var evt = e ? e:window.event;

   evt.cancelBubble = true;
   evt.returnValue = false;

   if (evt.stopPropagation) {
      evt.stopPropagation();
   }

   if (evt.preventDefault) {
      evt.preventDefault();
   }

   evt.stop(); // from google.maps.MouseEvent

};

【问题讨论】：

我建议使用 chrome 开发工具，设置断点，查看调用堆栈。 onClick 函数起初似乎是正确的，但是，考虑到bind 方法的影响，可能值得记录/检查“e”值。 [必须承认我不知道跨浏览器获取事件对象] 除此之外，我们需要一个工作应用程序来帮助您解决 IMO。
@EricG 在叠加层上，我认为这只是一个常见的 DOM 点击类型事件，但在地图上，它是一个带有 lat 和 lon 的 google 事件。 The app is here.在extinfowindow.js中搜索console.log
@EricG Another link。点击信息窗口。
请贴一个代码可读的例子。您的示例页面已缩小且不可读。
@Marcelo 我不确定您指的是什么代码。 extinfowindow.js 问题出在哪里，exam_find.js，find.php 代码都是可读/未缩小的。

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

【解决方案1】：

在第一个处理程序中执行MouseEvent.stop();。即：

google.maps.event.addListener(myOverlay, 'click', function(mouseEvent){
    mouseEvent.stop();
//Handle the click here
});

See the Google Maps documentation for MouseEvent

【讨论】：

谢谢。我以为就是这样，但地图点击事件处理程序仍然被调用。
@dougd_in_nc，我还没有测试过，但如果是这样，那将是一个错误。您是否有展示该问题的页面？
我刚刚在问题描述中添加了一个链接。
@dougd_in_nc，请发布代码可读的示例。您的示例页面已缩小且不可读。

【解决方案2】：

没关系... dom 侦听器正在侦听 mousedown 事件而不是单击事件，因此单击不会被取消。我应该让它监听点击事件。

var stealEvents = ['click', 'dblclick', 'DOMMouseScroll', 'onmousewheel'];
for( i=0; i < stealEvents.length; i++ ){
    google.maps.event.addDomListener(this.container_, stealEvents[i], this.onClick_.bind(this));
}

【讨论】：