I am close to working out a solution courtesy of ghostCoder hinting at the idea of detecting the touch event rather than the click event. This below code is what I currently have, however something is still not quite right. It works on my homepage (very basic page), however with the actual game page it breaks:
Here is my code: JAVASCRIPT:
var b=document.getElementById('STOP'),start=0;
//Check for touchstart
if('ontouchstart' in document.documentElement)
{
document.getElementById("notouchstart").style.display = "none";
}
//Add a listener that fires at the beginning of each interaction
[b].forEach(function(el){el.addEventListener('touchstart',interact);});
//Add the event handlers for each button
b.addEventListener('touchstart',highlight);
//Functions Store the time when the user initiated an action
function interact(e)
{
start = new Date();
}
//Highlight what the user selected and calculate how long it took the action to occur
function highlight(e)
{
e.preventDefault();
e.currentTarget.className="active";
if(start)
{
alert("test")
}
start = null;
}
BODY BUTTONS (firstly displays start button then when clicked displays stop button, then start again etc.)
<INPUT TYPE="button" style="background:url(images/Start_Btn.png); background-color:transparent; width:150px; height:186px; border:none; cursor:pointer;" id="START" onClick="startBTN();">
<INPUT TYPE="button" style="background:url(images/Stop_Btn.png); background-color:transparent; width:150px; height:186px; border:none; cursor:pointer;" id="STOP">
Thanks,
I have used touchend
for this. touchstart
is being triggered even though the action is drag/scroll
.
Listen for ‘touchstart’ instead of ‘click' :)
click is a bit delayed in touchscreens.
http://floatlearning.com/2011/03/developing-better-phonegap-apps/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With