touchstart,touchmove判断手机中滑屏方向

发布时间:2017-5-25 6:13:11 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"touchstart,touchmove判断手机中滑屏方向 ",主要涉及到touchstart,touchmove判断手机中滑屏方向 方面的内容,对于touchstart,touchmove判断手机中滑屏方向 感兴趣的同学可以参考一下。

滑动屏幕    touchstart:接触屏幕时触发,touchmove:活动过程触发,touchend:离开屏幕时触发

首先获取手接触屏幕时的坐标X,Y

//获取接触屏幕时的X和Y
$('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY;});

然后获取滑动的坐标,并使用后面的坐标减去前面的坐标,通过获取的值判断其滑动方向。因为手滑动方向一般不是水平或者垂直的,所以可使用Math.abs()进行比较,比如:像右上角滑动,当往上滑动的距离大于往右的距离时,取其往上滑动的距离,即往上滑动。

复制代码
$('body').bind('touchmove',function(e){    //获取滑动屏幕时的X,Y    endX = e.originalEvent.changedTouches[0].pageX,    endY = e.originalEvent.changedTouches[0].pageY;    //获取滑动距离    distanceX = endX-startX;    distanceY = endY-startY;    //判断滑动方向    if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){        console.log('往右滑动');    }else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){        console.log('往左滑动');    }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){        console.log('往上滑动');    }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){        console.log('往下滑动');    }else{        console.log('点击未滑动');    }

上一篇:【第四篇】ASP.NET MVC快速入门之完整示例(MVC5+EF6)
下一篇:CloudSim4.0报错NoClassDefFoundError,Caused by: java.lang.ClassNotFoundException: org.apache.commons.math3.distribution.UniformRealDistribution

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

腹肌贴健身器材智能腹部训练健腹器肌