使用 jQuery 在 Android 上确定长按（长按、按住）

Posted 2023-02-27

【中文标题】使用 jQuery 在 Android 上确定长按（长按、按住）

【英文标题】：Determining Long Tap (Long Press, Tap Hold) on Android with jQuery

【发布时间】：2011-01-17 04:51:23

【问题描述】：

我已经能够使用 jQuery 和 html 页面在 android 上通过 touchstart、touchmove 和 touchend 事件successfully play。现在我想看看确定一个长按事件的诀窍是什么，一个人轻按并保持 3 秒。我似乎还无法弄清楚这一点。我想在没有 Sencha Touch、JQTouch、jQMobile 等的情况下纯粹在 jQuery 中实现。

我喜欢 jQTouch 的概念，尽管它并没有为我提供很多东西，而且我的一些代码也与它发生了冲突。使用 Sencha Touch，我不喜欢从 jQuery 迁移到 Ext.js 和一些新的 javascript 抽象方法，尤其是当 jQuery 如此强大时。所以，我想单独用 jQuery 来解决这个问题。我已经能够使用 jQuery 自己做很多 jQTouch 和 Sencha Touch 的事情了。而 jQMobile 仍然是测试版，还不足以支持 Android。

【参考方案1】：

计时器未使用，但只有在用户长按手指后松开手指后才会触发。

var startTime, endTime;
var gbMove = false;

window.addEventListener('touchstart',function(event) 
    startTime = new Date().getTime(); 
    gbMove = false;        
,false);

window.addEventListener('touchmove',function(event) 
  gbMove = true;
,false);

window.addEventListener('touchend',function(event) 
    endTime = new Date().getTime();
    if(!gbMove && (endTime-startTime)/1000 > 2)
        alert('tap hold event');      
,false);

【参考方案2】：

var gnStartTime = 0;
var gbMove = false;
var gbStillTouching = false;

function checkTapHold(nID) 
  if ((!gbMove) && (gbStillTouching) && (gnStartTime == nID)) 
    gnStartTime = 0;
    gbMove = false; 
    alert('tap hold event');    
  


window.addEventListener('touchstart',function(event) 
  gbMove = false;
  gbStillTouching = true;
  gnStartTime = Number(new Date());
  setTimeout('checkTapHold(' + gnStartTime + ');',2000);
,false);

window.addEventListener('touchmove',function(event) 
  gbMove = true;
,false);

window.addEventListener('touchend',function(event) 
  gbStillTouching = false;
,false);

【参考方案3】：

为什么不直接使用 js 计时器呢？我做了类似的事情：

i=0;
$drink = document.getElementById('drink');
$drink.addEventListener('touchstart',function(event)
    $('#drink .mainBtnText').text('HOLD'); //mostly for debugging
    t = window.setInterval(function(event)
            i+=.5;
            if (i>=1)
                alert('taphold');
                window.clearInterval(t);
                i=0;
            
        ,500);
);
$drink.addEventListener('touchend',function(event)
    $('#drink .mainBtnText').text('Drink');
    i=0;
    window.clearInterval(t);
);

到目前为止，我绝对没有遇到任何问题......诚然，我还没有进行非常广泛的设备测试，但它可以在我的桌面（使用 mousedown/mouseup）以及 HTC Droid Eris（ Android 1.6) 和我的 Droid RAZR (Android 2.3)...

【讨论】：

奇怪的是，它在 touchmove/starting 或 end 在不同的地方表现得很好。不太清楚为什么要这样做，但我也没有抱怨：P

【参考方案4】：

我做了这样的事情：

var touchCounter;

window.addEventListener('touchstart', function () 
  var count = 0;
  touchCounter = setInterval(function () 
    count++;
    if (count == 10) alert('touch lasted 10 seconds');
  , 1000);
);

window.addEventListener('touchend', function () 
  clearInterval(touchCounter);
  touchCounter = null;
);

【参考方案5】：

虽然它不是 jQuery，但我已经在我的 Android 应用程序中这样做了：

注册的事件监听器：

var touchStartTimeStamp = 0;
var touchEndTimeStamp   = 0;

window.addEventListener('touchstart', onTouchStart,false);
window.addEventListener('touchend', onTouchEnd,false);

新增功能：

var timer;
function onTouchStart(e) 
    touchStartTimeStamp = e.timeStamp;


function onTouchEnd(e) 
    touchEndTimeStamp = e.timeStamp;

    console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds

检查时差并完成我的工作

我希望这会有所帮助。