Determining Long Tap (Long Press, Tap Hold) on Android with jQuery

Question

I\'ve been able to successfully play with the touchstart, touchmove, and touchend events on Android using jQuery and an HTML page. Now I\'m trying to see what the trick is t

Answer 1

I did something like this:

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

Answer 2

Timers not used but will only fire after user releases his finger after a long tap.

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);

Answer 3

Why not just use a js timer? I did something like:

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

And I've had absolutely no trouble with it thus far...admittedly, I haven't done incredibly extensive device testing, but it's worked on my desktop (with mousedown/mouseup) as well as an HTC Droid Eris (Android 1.6) and my Droid RAZR (Android 2.3)...

Answer 4

Although it is not jQuery but I've done it this way in my Android app:

1. registered events listeners:

   var touchStartTimeStamp = 0;
   var touchEndTimeStamp   = 0;
   
   window.addEventListener('touchstart', onTouchStart,false);
   window.addEventListener('touchend', onTouchEnd,false);
   

2. added functions:

   var timer;
   function onTouchStart(e) {
       touchStartTimeStamp = e.timeStamp;
   }
   
   function onTouchEnd(e) {
       touchEndTimeStamp = e.timeStamp;
   
       console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds
   }
   

3. checked time difference and did my stuff

I hope this will help.

Answer 5

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);