基于JavaScript touch事件的自定义按钮示例
2011-12-12 14:23
369 查看
在开始本文之前,如果对JavaScript的touch事件不是很了解的话,请阅读下面这篇文章:
http://select.yeeyan.org/view/213582/202991
目前网上关于JavaScript touch事件的讲解文章比较少,而上文是我搜索结果中较好的一篇。而因为其版权声明中禁止转载,我也很遗憾地不能将其转载到我的博客。
言归正传,在移动web的开发中,原有html button往往在外观和性能上都无法达到预期的要求,特别是越来越火的移动web游戏中,自定义的按钮就显得越来越得心应手了。
如果你曾经开发过Android,当你看到JavaScript touch事件处理的时候就会发现,它和Java的事件监听实在是太像了。
下面的示例中,笔者实现了上下左右四个方向的自定义按钮的按下和释放状态的模拟。
因为DOM对象本身并没有touch event,所以在编写处理事件的方法之前需要先用addEventListener()方法给DOM对象注册touch事件。
addEventListener()方法的原型如下:
target.addEventListener(type,listener, useCapture);
其中,target是目标DOM对象,如本例中的document,也可以是通过document.getElementById等方法获取到的元素;type是表示事件类型的字符串,如点击“click”、触屏开始“touchstart”等;listener是事件监听器,即处理事件的方法;useCapture是布尔值,用于指定事件流。
关于参数useCapture,可以参见下文:
/article/1765412.html
本例中只使用了touchstart和touchend两个事件,分别表示手指触到DOM对象和离开DOM对象两个状态。实际上touch event共有三个事件,即前两者和touchmove(表示手指在屏幕上移动)。这三个事件的event参数都包含了touches、targetTouches和changedTouches三个保存手指状态的列表。但是实际上,在touchend事件中,touches列表为空,所以在获取手指离开屏幕时的状态时,用到的是changedTouches列表。
更多关于touch event的信息请参见本文开始的文章链接。在后续的博文中,笔者将尝试使用touchmove事件来模拟一个切水果的移动web程序。
http://select.yeeyan.org/view/213582/202991
目前网上关于JavaScript touch事件的讲解文章比较少,而上文是我搜索结果中较好的一篇。而因为其版权声明中禁止转载,我也很遗憾地不能将其转载到我的博客。
言归正传,在移动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,可以参见下文:
/article/1765412.html
本例中只使用了touchstart和touchend两个事件,分别表示手指触到DOM对象和离开DOM对象两个状态。实际上touch event共有三个事件,即前两者和touchmove(表示手指在屏幕上移动)。这三个事件的event参数都包含了touches、targetTouches和changedTouches三个保存手指状态的列表。但是实际上,在touchend事件中,touches列表为空,所以在获取手指离开屏幕时的状态时,用到的是changedTouches列表。
更多关于touch event的信息请参见本文开始的文章链接。在后续的博文中,笔者将尝试使用touchmove事件来模拟一个切水果的移动web程序。
相关文章推荐
- javascript事件,自定义事件,基于自定义事件的解耦
- ALV OO:单击事件-双击事件-自定义按钮事件(示例)
- JS基于onclick事件实现单个按钮的编辑与保存功能示例
- javascript动态生成按钮并绑定点击事件
- JavaScript:按钮事件动态绑定
- js学习心得之js的自定义事件-基于观察者模式的实现
- JavaScript基础 submit按钮结合onclick事件 实现表单的提交与验证
- javascript 按回车键相应按钮提交事件
- UITableView自定义cell上的按钮点击事件
- javascript深入学习-DOM取参绑定事件-按钮计算器
- VC给自定义按钮加上事件操作
- iOS 一一 自定义cell按钮的点击事件(KVO)
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- 自定义UITableViewCell 上的多个按钮点击事件处理
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript示例六(事件冒泡与捕获)
- Yii框架zii.widgets.grid自定义按钮,ajax触发事件并提示
- javascript ready和load事件的区别示例介绍
- SenchaTouch添加自定义事件
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]