在openlayers地圖上檢測長按

Question

我有一張地圖，該地圖目前捕獲了雙擊事件並觸發了一些代碼以在地圖上設置航點，因此效果很好。

我真正想做的是檢測平板電腦/移動設備用戶的長按，因為我認為雙擊方法（在我的ipad上運行良好）不如使用鼠標指針那樣精確。 我認為我必須以某種方式綁定到onmousedown / onmouseup並設置一個計時器/閾值，但是我正在努力使這種工作正常進行。

Answer 1

舊問題-但由於我為此感到有點掙扎，所以我想我會為那些通過google尋找信息的人分享答案。

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函數）觸發一個事件。 但是，如果用戶抬起手指（從而觸發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