Touch事件

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了

 

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前(引发)事件的触摸点的列表

 

通过一个例子来区分一下触摸事件中的这三个属性：

1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。

 

2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，为第二个手指的触摸点，因为第二个手指是引发事件的原因

 

3. 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值

 

4. 手指滑动时，三个值都会发生变化

 

5. 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。

 

6. 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，此值为最后一个离开屏幕的手指的接触点。

 

每个Touch对象包含的属性如下:

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触目的DOM节点目标。

 

 

2. 触点坐标选取

touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX;

 

touchend使用: e.changedTouches[0].pageX 或(jquery)e.originalEvent.changedTouches[0].pageX;

 

3.touchmove事件对象的获取

想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数

touchmove:function(e,参数一){

　　var e=arguments[0]

　　e.preventDefault()

}

 

原生js获取方式

mousedown: event.pageX ,event.pageY;

mousemove: event.pageX ,event.pageY;

mouseup: event.pageX ,event.pageY;

 

touchstart：event.touches[0].pageX || event.changedTouches[0].pageX || event.targetTouches[0].pageX;

 

touchmove: event.touches[0].pageX || event.changedTouches[0].pageX || event.targetTouches[0].pageX;

 

touchend： event.touches[0].pageX || event.changedTouches[0].pageX || event.targetTouches[0].pageX;

 

jq获取方式

mousedown: event.pageX ,event.pageY;

mousemove: event.pageX ,event.pageY;

mouseup: event.pageX ,event.pageY;

 

touchstart：event.originalEvent.touches[0].pageX || event.originalEvent.changedTouches[0].pageX || event.originalEvent.targetTouches[0].pageX;

 

touchmove: event.originalEvent.touches[0].pageX || event.originalEvent.changedTouches[0].pageX || event.originalEvent.targetTouches[0].pageX;

 

touchend： event.originalEvent.changedTouches[0].pageX || event.originalEvent.targetTouches[0].pageX;