如何区分移动版 Google Maps JS API v3 中的点击和拖动？答案

【问题标题】：How can I differentiate between a click and a drag in Google Maps JS API v3 on Mobile?如何区分移动版 Google Maps JS API v3 中的点击和拖动？
【发布时间】：2014-02-11 12:12:10
【问题描述】：

我正在使用 Bootstrap、jQuery 和 Google Maps v3 API 构建一个支持移动设备的 HTML5 网站。

我已经弄清楚了大部分代码，我希望能够单击，添加一个标记，将该位置 HTTP POST 到服务器（用于存储它）。

我最初无法让 android 看到点击应该在触摸时发生。

if ($.browser.mobile) {
        google.maps.event.addListener(map, 'mousedown', function(event) {
           placeMarker(event.latLng);
        });

} else { 

  google.maps.event.addListener(map, 'click', function(event) {
     placeMarker(event.latLng);
  });

}
}

我正在使用http://detectmobilebrowsers.com/ jQuery 代码来做$.browser.mobile 的事情。

我遇到的问题是，如果我点击地图，拖动它，然后移动到手机上的不同位置，它会调用placeMarker()，这可以理解，如果烦人，那么拖动地图的过程创建标记（并 POST 到服务器）。

有什么方法可以检测到是否发生了拖动，所以我可以告诉它不要打扰做 placeMarker 和 POST？

【问题讨论】：

在 mousedown 时注册 mousemove 事件。如果鼠标移动超过阈值，请在 mouseup 事件上执行 event.preventDefault。
@closure 你能解释一下你注册一个活动的意思吗？
@closure 表示在地图上为鼠标按下创建一个监听器（addListener）。在处理程序中，在允许调用服务器之前检查鼠标是否移动了一些。如果 mouseup 与 mousedown （或附近）发生在同一位置，那么您没有拖动。虽然，据我所知，GMaps API 中有“拖动”事件......

标签： javascript jquery google-maps-api-3

【解决方案1】：

看看这样的代码是否适合你：

google.maps.event.addListener(map, 'mousedown', function(event) {

  var initPoint = {x: event.pageX, y: event.pageY}, 
      toBeCanceled = false, 
      latLong = event.latLong;

    google.maps.event.addListener(map, 'mousemove', function(event) {
       var newPoint = {x: event.pageX, y: event.pageY};

       // if newPoint has moved beyond expected limits
       toBeCanceled = true
    });  

    google.maps.event.addListener(map, 'mouseup', function(event) {

      if (toBeCanceled) {
        event.preventDefault() // event.stop() seems to work as commented by OP
      } else {
        placeMarker(event.latLng);
      }

      // Unregister mousemove and mouseup
    });

});

【讨论】：

我不得不将 event.preventDefault() 更改为 event.stop()，但现在可以了 :)

【解决方案2】：

我宁愿使用dragstart, dragend, drag 事件而不是mousedown 事件。如果不影响您想要呈现给用户的用户体验，您也可以将 click 替换为 dblclick。我不知道“点击”如何与“拖动”事件交互。

【讨论】：

双击很烂。尤其是在移动设备上。