Touch事件详解及区别，触屏滑动距离计算

Posted 2020-09-02 FEDeveloper

移动端有四个关于触摸的事件，分别是touchstart、touchmove、touchend、touchcancel（比较少用）, 它们的触发顺序是touchstart-->touchmove-->touchend-->click，所以touch事件触发完成后会接着触发click事件，需要注意一下 ，阻止一下事件冒泡就可以了。 
touch事件可以产生一个event对象，这个event对象除基本的一些属性外还附带了三个额外的属性：

touches

一个TouchList对象，包含当前所有屏幕上的触点的Touch对象，该属性不一定是当前元素的touchstart事件触发，需要注意。

targetTouches

也是一个TouchList对象，包含从当前元素touchstart事件触发的的触点的Touch对象，跟上面的touches区别于触发点不一样。

changedTouches

也是一个TouchList对象，对于touchstart事件, 这个TouchList对象列出在此次事件中新增加的触点。对于touchmove事件，列出和上一次事件相比较，发生了变化的触点。对于touchend，列出离开触摸平面的触点（这些触点对应已经不接触触摸平面的手指）。

touchend

这里要特别注意，touches和targetTouches只存储接触屏幕的触点，touchend时，touches和targetTouches是个空数组，所以要获取触点最后离开的状态要使用changedTouches。

Touch和TouchList

由Touch对象构成的数组，通过event.touches、event.targetTouches或者event.changedTouches取到。一个 Touch 对象代表一个触点，当有多个手指触摸屏幕时，TouchList就会存储多个Touch对象。Touch对象代表一个触点，可以通过TouchList[0]获取， 每个触点包含位置，大小，形状，压力大小，和目标 element属性。本文中只使用到Touch.pageX和Touch.pageY属性，更多介绍可以查看Touch属性介绍。

 

touches, targetTouches, changedTouches 区别

1. touches: A list of information for every finger currently touching the screen
2. targetTouches: Like touches, but is filtered to only the information for finger touches that started out within the same node
3. changedTouches: A list of information for every finger involved in the event (see below) To better understand what might be in these lists, let’s go over some examples quickly

They vary in the following pattern:
1. When I put a finger down, all three lists will have the same information. It will be in changedTouches because putting the finger down is what caused the event.
　　第一根手指触摸屏幕，三个事件获取的值相同。

2. When I put a second finger down, touches will have two items, one for each finger. targetTouches will have two items only if the finger was placed in the same node as the first finger. changedTouches will have the information related to the second finger, because it’s what caused the event
　　第二根手指触摸屏幕，此时touches获取两个触摸点的信息。若触摸点在同一个对象上，targetTouches也获取两个触摸点的信息。changedTouches只保存第二个触摸点的信息。

 

3. If I put two fingers down at exactly the same time, it’s possible to have two items in changedTouches, one for each finger
　　若同时用两根手指触摸屏幕，changedTouches 有两个列表分别表示两个触摸点的信息。

 

4. If I move my fingers, the only list that will change is changedTouches and will contain information related to as many fingers as have moved (at least one)
　　如果移动触摸点，只有 changedTouches 会记录每个移动的触摸点信息

 

5. When I lift a finger, it will be removed from touches, targetTouches and will appear in changedTouches since it’s what caused the event
　　当一个触摸点离开，它的信息列表将从touches，targetTouches移除，但是changedTouches会保存此触摸点信息。

 

6. Removing my last finger will leave touches and targetTouches empty, and changedTouches will contain information for the last finger
　　最后一个触摸点离开，touches，targetTouches变成空值，而 changedTouches保存着最后一个离开的触摸点信息。

 

 

移动距离计算

基本知识介绍完，距离的计算方法也差不多很明确了，主要用到了Touch对象中的pageX和pageY属性，终点位置减开始位置即可获得。 代码如下：

var startX = startY = endX = endY = 0;  
        var dom = document.getElementById(\'main\');
        //touchStart事件
        dom.addEventListener(\'touchstart\',function(event){
            var touch = event.targetTouches[0];
            startX = touch.pageX;
            startY = touch.pageY;
            document.getElementById(\'start\').value = startX + \'，\' + startY;
        },false);
        //touchmove事件
        dom.addEventListener(\'touchmove\',function(event){
            var touch = event.targetTouches[0];
            endX = touch.pageX;
            endY = touch.pageY;
        },false);
        //touchend事件
        dom.addEventListener(\'touchend\',function(event){
            document.getElementById(\'end\').value = endX + \'，\' + endY;
            document.getElementById(\'count\').value = (endX - startX) + \'，\' + (endY - startY);
        },false);