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

Question

I was able to successfully play using touchstart, touchmove and touchhend on Android using jQuery and an HTML page. Now I'm trying to figure out what the trick is to define a long tap event where one picks and holds for 3 seconds. I don’t seem to understand this yet. I want this exclusively in jQuery without Sencha Touch, JQTouch, jQMobile, etc.

I like the concept of jQTouch, although it does not give me much, and some of my codes break with it. With Sencha Touch, I'm not a fan of moving from jQuery to Ext.js and some new way to javascript abstraction, especially when jQuery is so capable. So, I want to understand this with jQuery. I was able to execute many jQTouch and Sencha Touch functions myself using jQuery. And jQMobile is still too beta and is not targeting Android yet.

Answer 1

Timers are not used, but will only work after the user releases his finger after a long press.

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 the 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 so far I have not had any problems with this ... Admittedly, I have not done incredibly extensive device testing, but it worked on my desktop (with mousedown / mouseup) as well as 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 this is not jQuery, but I did it like this in my Android application:

• registered event listeners:

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

• added features:

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

• checked the time difference and did my things

Hope this helps.