触控事件

转载，请注明出处！        

        为了让一款应用具备高效、易操作的特点，不仅需要设计友好的用户界面，还要正确、及时的响应用户输入。移动设备与PC机不同，PC机需要快速的响应鼠标事件，移动设备需要快速的响应触控事件及手势事件。触控事件需要记录：1）屏幕上有几根手指；2）每一根手指的位置；3）每一根手指的动作（压下，还是抬起，还是移动）。手势事件是在高端设备上应用的。并非所有的设备都支持手势事件。手势事件有多种类型，如“两个手指相向移动，类似与捏”，“手指绘制圆圈”等。本文侧重于讲解触控事件的几个概念。

         当你将一根手指放到触摸屏上时，你就创建了一个触控事件。手指作出不同的动作，会导致不同的触控事件产生。手指接触到触摸屏，会产生一个touchstart事件。手指抬起、离开触摸屏，会产生一个touchend事件。手指接触到触摸屏后并未马上抬起、而是移动了，那么就会产生touchmove事件。如果手指还在触摸屏上的时候另一个应用被启动了，那么就会产生一个touchcancel事件。综上系统存在如下类型的触控事件：

• touchstart事件：手指放到触摸屏上时产生

• touchend事件：手指离开触摸屏上时产生

• touchmove事件：手指放到触摸屏上后、离开触摸屏之前，贴着屏幕移动时产生

• touchcancel事件：手指未离开触摸屏、触控事件却被强行终止，那么产生touchcancel事件。

         因为指头在屏幕上的作用与鼠标在屏幕上的作用相同，所以触控事件与鼠标事件似乎具有一一对应的关系。但是，千万不能这样认为，触控事件与鼠标事件是不同的。PC机上只有一个鼠标，在某时刻最多有一个鼠标事件产生。触摸屏可不同，完全可以将多个手指同时放到触摸屏上。因此，完全有可能让多个触控事件同时产生。

        为了正确记录同时接触的多个点，触控事件需要包含如下的三种信息：

1. touches：这是一个链表，记录了所有接触屏幕的手指的位置。
2. targetTouches：这是一个链表，记录了与操作同一节点的手指的位置。
3. changedTouches：这是一个链表，记录了改变了动作的手指的位置。
   

         假如有3根手指A(a0, a1)，B(b0, b1)，C(c0, c1)都接触了屏幕，其中A手指接触了节点node1，B、C手指接触了节点node2。如果C手指移动了一下改变了位置变为(cc0, cc1)，那么这三个列表记录的信息为：

1. touches：A(a0, a1), B(b0, b1), C(cc0, cc1) 所有手指的位置
2. targetTouches：B(b0, b1), C(cc0, cc1) 操作node2节点的手指的位置
3. changedTouches：C(cc0, cc1) 改变动作的手指的新位置
   

         上面是触控事件包含的三个列表，我觉得三个列表的功能应该说清楚了。前文叙述中，只简单的说列表中存储的是位置信息。太笼统了，下面详细介绍列表中存储的信息。

1. clientX: 相对于文档视口原点的x坐标。例如触摸的在文档坐标系中的位置为(100, 500)，视口原点在文档坐标系中的位置为(50, 50)。那么clientX为50。
2. clientY: 相对于文档视口原点的y坐标。例如触摸的在文档坐标系中的位置为(100, 500)，视口原点在文档坐标系中的位置为(50, 50)。那么clientY为450。
3. screenX:相对于屏幕原点的x坐标。
4. screenY:相对于屏幕原点的y坐标。
5. pageX:文档坐标系中的x坐标。
6. pageY：文档坐标系中的y坐标。
7. identifier：每一个位置都有一个id号，不同的位置对应的id是不同的。Id的类型是整数。
8. target：手指接触的dom节点。
   

原文地址: http://www.sitepen.com/blog/2011/12/07/touching-and-gesturing-on-iphone-android-and-more/