Android Touch事件中的HTML5

问题描述：

我有一个Android应用程序，在WebView控件中显示HTML5页面。 HTML5页面位于assets文件夹中的应用程序内。该应用程序适用于儿童，当按下按钮时，它会触发一个更改屏幕内容的JavaScript事件。

应用程序的问题是，当我的孩子，（她已经两岁了），按下它并不总是有效的按钮，我可以看到她突出显示按钮，但它与她按键不正确有关。有没有比触摸屏的onclick事件更好的方法？或者我应该在其他事件中复制函数调用，例如ondragend = ...？或者我应该使用触摸事件而不是鼠标点击事件？

代码：

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:

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

-Kyle

答

我自己回答了这个问题..

我添加了两个比鼠标效果更好的touchstart听众在触摸设备上向下或点击。我两岁的时候在onclick事件和mousedown事件上按下按钮时遇到了很多麻烦，但没有触及touchstart事件。

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.

<script type="text/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();
}

</script>

-Kyle

相关推荐