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）