基于JavaScript touch事件的自定义按钮示例

最新推荐文章于 2024-01-24 18:53:27 发布

有点发红

最新推荐文章于 2024-01-24 18:53:27 发布

阅读量7.4k

点赞数 1

分类专栏： JavaScript 文章标签： javascript function table html button web

本文链接：https://blog.youkuaiyun.com/sadfishsc/article/details/7063451

版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

在开始本文之前，如果对JavaScript的touch事件不是很了解的话，请阅读下面这篇文章：

http://select.yeeyan.org/view/213582/202991

言归正传，在移动web的开发中，原有html button往往在外观和性能上都无法达到预期的要求，特别是越来越火的移动web游戏中，自定义的按钮就显得越来越得心应手了。

如果你曾经开发过Android，当你看到JavaScript touch事件处理的时候就会发现，它和Java的事件监听实在是太像了。

下面的示例中，笔者实现了上下左右四个方向的自定义按钮的按下和释放状态的模拟。

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function() {
         document.addEventListener("touchstart",touchStart, false);
         document.addEventListener("touchend",touchEnd, false);
}
 
function touchStart(event) {
         event.touches[0].target.src = "button/" + event.touches[0].target.id + "_pressed.png";
}
 
function touchEnd(event) {
         event.changedTouches[0].target.src = "button/" + event.changedTouches[0].target.id +"_default.png";
}
</script>
</head>
 
<body>
   <table>
       <tr>
           <td>
                <table>
                    <tr>
                        <td></td>
                        <td><img src="button/up_default.png" id="up" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><img src="button/left_default.png" id="left" /></td>
                        <td><img src="button/down_default.png" id="down" /></td>
                        <td><img src="button/right_default.png" id="right" /></td>
                    </tr>
                </table>
           </td>
       </tr>
   </table>
</div>
</body>
</html>

因为DOM对象本身并没有touch event，所以在编写处理事件的方法之前需要先用addEventListener()方法给DOM对象注册touch事件。

addEventListener()方法的原型如下：

target.addEventListener(type,listener, useCapture);

其中，target是目标DOM对象，如本例中的document，也可以是通过document.getElementById等方法获取到的元素；type是表示事件类型的字符串，如点击“click”、触屏开始“touchstart”等；listener是事件监听器，即处理事件的方法；useCapture是布尔值，用于指定事件流。

关于参数useCapture，可以参见下文：

http://blog.youkuaiyun.com/claram/article/details/6124422

本例中只使用了touchstart和touchend两个事件，分别表示手指触到DOM对象和离开DOM对象两个状态。实际上touch event共有三个事件，即前两者和touchmove（表示手指在屏幕上移动）。这三个事件的event参数都包含了touches、targetTouches和changedTouches三个保存手指状态的列表。但是实际上，在touchend事件中，touches列表为空，所以在获取手指离开屏幕时的状态时，用到的是changedTouches列表。

更多关于touch event的信息请参见本文开始的文章链接。在后续的博文中，笔者将尝试使用touchmove事件来模拟一个切水果的移动web程序。