JavaScript笔记（touch事件）

参考文章：《touch事件中的touches、targetTouches和changedTouches详解》，《移动互联网终端的touch事件,touchstart, touchend, touchmove》

1 触摸事件

touchstart，touchmove，touchend，这三种是移动设备广泛实现的基本触摸事件，通过三者组合，可以完成诸如“长按”，“点击”，“滑动”等移动端特定的操作。

• touchstart 事件：当手指触摸屏幕中的DOM对象；
• touchmove 事件：当手指触摸屏幕中的DOM对象后，拖动；
• touchend 事件：当手指离开屏幕

1.1 触摸列表

以上 touchstart ，touchmove ，touchend 每个事件都拥有三个触摸列表，分别是：

• touches：当前屏幕上所有触摸点的列表；
• targetTouches：当前对象中所有触摸点的列表；
• changedTouches：涉及当前(引发)事件的触摸点的列表

举例子说明以上三个触摸列表的说明：
1、当使用一个手指触摸屏幕，引起事件触发时，三个列表属性都拥有相同的数值。
2、在情况一的状况下，再使用第二个手指触摸屏幕，引起事件触发时，此时的各列表的属性情况为：

• touches：拥有两个元素，每个手指触摸点为一个元素值
• targetTouches：当这两个手指都触碰的是相同元素时， touches 和 targetTouches 的元素值相同，否则只有一个元素值
• changeTouches：changedTouches 此时只有一个元素值，为第二个手指的触摸点，因为第二个手指是引发事件的原因

3、用两个手指同时接触屏幕，此时 changedTouches 有两个值，每一个手指的触摸点都有一个值
4、手指滑动时，三个值都会发生变化
5、一个手指离开屏幕，touches 和 targetTouches 中对应的元素会同时移除，而 changedTouches 仍然会存在元素值，此值为最后一个离开屏幕的手指的接触点

1.2 触点坐标的获取

1 touchstart 和 touchmove 使用：e.targetTouches[0].pageX 或 e.originalEvent.targetTouches[0].pageX（使用jquery）

2 touchend 使用：e.changedTouches[0].pageX 或 e.originalEvent.changedTouches[0].pageX（使用jquery）