转载,请注明出处!
为了让一款应用具备高效、易操作的特点,不仅需要设计友好的用户界面,还要正确、及时的响应用户输入。移动设备与PC机不同,PC机需要快速的响应鼠标事件,移动设备需要快速的响应触控事件及手势事件。触控事件需要记录:1)屏幕上有几根手指;2)每一根手指的位置;3)每一根手指的动作(压下,还是抬起,还是移动)。手势事件是在高端设备上应用的。并非所有的设备都支持手势事件。手势事件有多种类型,如“两个手指相向移动,类似与捏”,“手指绘制圆圈”等。本文侧重于讲解触控事件的几个概念。
当你将一根手指放到触摸屏上时,你就创建了一个触控事件。手指作出不同的动作,会导致不同的触控事件产生。手指接触到触摸屏,会产生一个touchstart事件。手指抬起、离开触摸屏,会产生一个touchend事件。手指接触到触摸屏后并未马上抬起、而是移动了,那么就会产生touchmove事件。如果手指还在触摸屏上的时候另一个应用被启动了,那么就会产生一个touchcancel事件。综上系统存在如下类型的触控事件:- touchstart事件:手指放到触摸屏上时产生
- touchend事件:手指离开触摸屏上时产生
- touchmove事件:手指放到触摸屏上后、离开触摸屏之前,贴着屏幕移动时产生
- touchcancel事件:手指未离开触摸屏、触控事件却被强行终止,那么产生touchcancel事件。
为了正确记录同时接触的多个点,触控事件需要包含如下的三种信息:
- touches:这是一个链表,记录了所有接触屏幕的手指的位置。
- targetTouches:这是一个链表,记录了与操作同一节点的手指的位置。
- changedTouches:这是一个链表,记录了改变了动作的手指的位置。
- touches:A(a0, a1), B(b0, b1), C(cc0, cc1) 所有手指的位置
- targetTouches:B(b0, b1), C(cc0, cc1) 操作node2节点的手指的位置
- changedTouches:C(cc0, cc1) 改变动作的手指的新位置
- clientX: 相对于文档视口原点的x坐标。例如触摸的在文档坐标系中的位置为(100, 500),视口原点在文档坐标系中的位置为(50, 50)。那么clientX为50。
- clientY: 相对于文档视口原点的y坐标。例如触摸的在文档坐标系中的位置为(100, 500),视口原点在文档坐标系中的位置为(50, 50)。那么clientY为450。
- screenX:相对于屏幕原点的x坐标。
- screenY:相对于屏幕原点的y坐标。
- pageX:文档坐标系中的x坐标。
- pageY:文档坐标系中的y坐标。
- identifier:每一个位置都有一个id号,不同的位置对应的id是不同的。Id的类型是整数。
- target:手指接触的dom节点。
原文地址: http://www.sitepen.com/blog/2011/12/07/touching-and-gesturing-on-iphone-android-and-more/