Question

我有一张地图，目前捕获双击事件并触发一些代码在地图上设置一个航点，它运行良好。

我真正想做的是检测平板电脑/移动用户的长按，因为我认为双击方法（在我的ipad上运行正常）不像鼠标指针那么精确。我假设我必须以某种方式绑定到onmousedown / onmouseup并设置一个计时器/阈值，但我正在努力获得这样的工作。

Answer 1

老问题 - 但是由于我有点挣扎，我想我会通过谷歌分享给人们的答案。

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值更改为您希望用户按下地图的时间。

说明：在等待1000毫秒后（通过setTimeOut函数），touchstart事件基本上会触发事件。然而，如果用户抬起他们的手指（从而触发touchend事件），则清除setTimeOut功能。如果用户移动他们的手指（从而触发touchmove事件）或缩放级别更改（由multiTouchEvent变量监视），也会发生这种情况。

希望这有助于某人。

在Android 4 +上测试

Answer 2

试试这段代码：

$(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;
    });
});

DEMO

检测openlayers地图上的长按

2 个答案: