Touch事件及触屏滑动距离计算

Posted 2020-09-11

移动端涉及图片轮播或者一些交互性的游戏时都会用到，毕竟移动端交互大多都靠手指。 
移动端有四个关于触摸的事件，分别是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或者eveent.changedTouches取到。一个 Touch 对象代表一个触点，当有多个手指触摸屏幕时，TouchList就会存储多个Touch对象。Touch对象代表一个触点，可以通过TouchList[0]获取， 每个触点包含位置，大小，形状，压力大小，和目标 element属性。本文中只使用到Touch.pageX和Touch.pageY属性，更多介绍可以查看Touch属性介绍。

移动距离计算

基本知识介绍完，距离的计算方法也差不多很明确了，主要用到了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);

演示地址：手指滑动距离计算