首页 > 代码库 > Touch事件及触屏滑动距离计算

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

移动端涉及图片轮播或者一些交互性的游戏时都会用到,毕竟移动端交互大多都靠手指。 
移动端有四个关于触摸的事件,分别是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);


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

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