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);
  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值