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 to determine a long tap event, where one taps and holds for 3 seconds. I can't seem to figure this out yet. I'm wanting to this purely in jQuery without Sencha Touch, JQTouch, jQMobile, etc.

I like the concept of jQTouch, although it doesn't provide me a whole lot and some of my code breaks with it. With Sencha Touch, I'm not a fan of moving away from jQuery into Ext.js and some new way of doing Javascript abstraction, especially when jQuery is so capable. So, I want to figure this out with jQuery alone. I've been able to do many jQTouch and Sencha Touch things on my own using jQuery. And jQMobile is still too beta and not directed enough to the Android yet.

Answer 1

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

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

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 5

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.