首页 > 移动平台 > 详细

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

时间:2017-04-09 20:33:45      阅读:360      评论:0      收藏:0      [点我收藏+]

滑动屏幕    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(‘点击未滑动‘);
    }

});

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

原文:http://www.cnblogs.com/lbnnbs/p/6685993.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!