Click here to Skip to main content
15,868,440 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
I have an android app that displays an HTML5 page inside a WebView control. The HTML5 page is inside the app in the assets folder. The app is for children and when a button is pressed it fires a JavaScript event that changes stuff on the screen.

The problem with the app is that when my child, (she's two years old), presses the button it doesn't always work, I can see her highlight the button but it has something to do with her inaccurately pressing the button. Is there a better way than the onclick event for touch screens? Or should I be duplicating the function call in other events such as ondragend=...? Or should I be using touch events instead of mouseclick events?

Code:
HTML
<img onclick="numPlus();" src="img/next.png" style="width:100px;" />


-Kyle
Posted

1 solution

I answered this myself..

I added two touchstart listeners that work far better than mousedown or onclick on touch devices. My two year old had a lot of trouble pressing a button on an onclick event and a mousedown event but not on a touchstart event.

HTML
<script type="text/javascript">

JavaScript
//get the elements that I am adding the event listeners to
var t = document.getElementById("minus");
var t2 = document.getElementById("plus");

//Add the touchstart listener to each element
//touchstart is similar to mousedown
//but works better for an inaccurate touch from a child
t.addEventListener("touchstart", touchHandler, false);
t2.addEventListener("touchstart", touchHandler2, false);

//enclose what you want done inside these statements:
//in my case they call functions I created numMinus and numPlus
function touchHandler(event) {
    numMinus();
}
function touchHandler2(event) {
    numPlus();
}

HTML
</script>


-Kyle
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900