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



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

我真正想做的是检测平板电脑/移动用户的长按,因为我认为双击方法(在我的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;
    });
});
演示

相关内容

  • 没有找到相关文章

最新更新