Handling touchstart and touchend events html5 (XDK)

Hi Experts,
I am in the process of developing a cross platform mobile app using Intel XDK using basically HTML5 and JavaScript.
The portion I am now struggling with worked perfectly in the simulator when using mousedown/mouseup and a timer event.
On the actual device (Android) this does not work and I assume I should rather use touchstart and touchend.
I am not sure how to implement this and would really appreciate some help.
The code I am using is pasted below. Not that where I currently have the reference to touchstart/touchend, this was previously mousedown/mouseup which worked perfectly with the functions below (in the simulator :) ).
 <input type="button" value="VERIFY" id="bigbutton" onclick="doit()" touchstart="chk()" touchend="chk(1)">
 function chk(up){ 
                            if(up)clearTimeout(chk.timer);                      
                            else chk.timer=setTimeout( function() {
                              window.location = "http://xxx.0.xxx.203/php_check.php";
                              },2000) ;
                            }
                           function doit(){ 
                               document.myform1.submit();
                           }
                    

Open in new window


kind regards
Zack SnydersAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zack SnydersAuthor Commented:
Solution below

<input type="button" value="VERIFY" id="bigbutton" > 
<script> 
//$('#bigbutton').on('touchstart click', function(e){ 
var startTime, endTime; 
var gbMove = false; 
$lb= document.getElementById('bigbutton'); 

$lb.addEventListener('touchstart',function(event) { 
startTime = new Date().getTime(); 
gbMove = false; 
},false); 

$lb.addEventListener('touchmove',function(event) { 
gbMove = true; 
},false); 

$lb.addEventListener('touchend',function(event) { 
endTime = new Date().getTime(); 
if(!gbMove && (endTime-startTime)/1000 > 2){ 
alert('tap hold event - long click'); 
} else { 
// alert("normal click"); 
document.forms["myform1"].submit(); 
} 
},false); 
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JAaron AndersonProgramming Architect @ Widener UniversityCommented:
hrm how could I adapt this listening to an .on.change() dropdown menu click trigger event (to work on touchstart for iphone6) when the selection is a targeted value ?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.