在开放层地图上检测到长按

Detecting a long press on openlayers map

本文关键字：检测 地图      更新时间：2023-09-26

我有一个地图，目前捕获双击事件并触发一些代码来设置地图上的路点，它工作得很好。

我真正想做的是检测平板电脑/移动用户的长按，因为我认为双击方法(在我的ipad上工作得很好)不像用鼠标指针那么精确。我假设我将不得不以某种方式连接到onmousedown/onmouseup并设置定时器/阈值，但我正在努力得到这样的工作。

老问题-但由于我对此有点挣扎，我想我应该分享答案给那些通过谷歌查找的人。

var multiTouchEvent = 0;
var timeoutId;
var waitFor = 1000;
$(document).delegate("#openLayersMapDiv", "pagecreate", function() {
     map.events.register('touchstart', map, function(e) {
         multiTouchEvent = e.touches.length;
         timeoutId = setTimeout(function() {
              if (multiTouchEvent > 1) {
                   clearTimeout(timeoutId);
              }
              else {
                   alert("longpress!!!");
              }
         }, waitFor);
     }, true);
     map.events.register('touchmove', map, function(e) {
         clearTimeout(timeoutId);
     });
     map.events.register('touchend', map, function(e) {
         clearTimeout(timeoutId);
     });
}

上面的警报将在1000毫秒后触发。更改waitFor值，让用户按下地图的时间。

解释:本质上，touchstart事件在等待1000毫秒后触发一个事件(通过setTimeOut函数)。但是，如果用户抬起手指(从而触发触摸端事件)，setTimeOut函数将被清除。如果用户移动手指(从而触发touchmove事件)或缩放级别改变(由multiTouchEvent变量监控)，也会发生这种情况。

希望这能帮助到一些人。

Android 4+测试

试试下面的代码:

$(document).ready(function () {
    var longpress = false;
    $("button").on('click', function () {
        (longpress) ? alert("Long Press") : alert("Short Press");
    });
    var startTime, endTime;
    $("button").on('mousedown', function () {
        startTime = new Date().getTime();
    });
    $("button").on('mouseup', function () {
        endTime = new Date().getTime();
        longpress = (endTime - startTime < 500) ? false : true;
    });
});
演示

相关文章：