移动端touch滑动方向的判断

var slider = {
 //判断设备是否支持touch事件
    touch:(‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch,
 
 //事件
 events:{
  slider:document,
  handleEvent:function(event){
   if(event.type == ‘touchstart‘){
    this.start(event);
   }else if(event.type == ‘touchmove‘){
    this.move(event);
   }else if(event.type == ‘touchend‘){
    this.end(event);
   }
  },
  
  //滑动开始
  start:function(event){
   //touches数组对象获得屏幕上所有的touch,取第一个touch
   var touch = event.targetTouches[0];
   //取第一个touch的坐标值
   startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
   //这个参数判断是垂直滚动还是水平滚动
   isScrolling = 0;
   this.slider.addEventListener(‘touchmove‘,this,false);
   this.slider.addEventListener(‘touchend‘,this,false);
  },
  
  //移动
  move:function(event){
   //当屏幕有多个touch或者页面被缩放过,就不执行move操作
   if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
   var touch = event.targetTouches[0];
   endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
   //isScrolling为1时,表示纵向滑动,0为横向滑动
   isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;
   if(isScrolling === 1){
    //阻止触摸事件的默认行为,即阻止滚屏
    event.preventDefault();
   }
  },
  
  //滑动释放
  end:function(event){
   //滑动的持续时间
   var duration = +new Date - startPos.time;
   var i = 0;
   if(Number(duration) > 10){
    if(isScrolling === 1){
     //判断是上移还是下移,当偏移量大于10时执行
     if(endPos.y < -10){
      i = 1;
     }else if(endPos.y > 10){
      i = 3;
     }
    }else if(isScrolling === 0){
     //判断是左移还是右移,当偏移量大于10时执行
     if(endPos.x > 10){
      i = 2;
     }else if(endPos.x < -10){
      i = 4;
     }
    }
    this.callback(i);
    startPos = endPos = null;
    return false;
   }
   
   //解绑事件
   this.slider.removeEventListener(‘touchmove‘,this,false);
   this.slider.removeEventListener(‘touchend‘,this,false);
  },
  
  //要执行函数
  callback:function(direction){
   //上右下左1234
   switch(direction){
    case 1:
     alert(‘上‘);
     break;
    case 2:
     alert(‘右‘);
     break;
    case 3:
     alert(‘下‘);
     break;
    case 4:
     alert(‘左‘);
     break;
    default:
     break;
   };
  },
    },
 
 //初始化
    init:function(){
        if(!!this.touch) this.events.slider.addEventListener(‘touchstart‘,this.events,false);
    }
};
slider.init();

如有需要修改的地方或者有别的更好的方法,求大神多多指教,谢谢!

时间: 2024-10-15 05:12:46

移动端touch滑动方向的判断的相关文章

原生 JS 实现移动端 Touch 滑动反弹

什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 Touch事件可以细分成三种,分别是: touchstart.touchmove和 touchend,并且 touch事件必须要用 addEventListener去监听. touchStart当手指触碰到屏幕的时候触发 touchmove当手指在屏幕上不断移动的时候触发 touchend当手指离开

《移动端浏览器Touch事件判断手指滑动方向方法》

1 $("body").on("touchstart", function(e) { 2     e.preventDefault(); 3     startX = e.originalEvent.changedTouches[0].pageX, 4     startY = e.originalEvent.changedTouches[0].pageY; 5 }); 6 $("body").on("touchmove",

H5案例分享:移动端touch事件判断滑屏手势的方向

移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 思路:用touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动:X的结果如果负数,则说明手指是从右往左划动:Y的结果如果正数,则说明手指是从

移动端滑动方向判断

移动端滑动方向判断,主要是判断利用x,y轴方向的增量,哪个轴增的快,就是哪个方向. 在touchstart中获取初始点,startX, startY; 在touchmove中获取移动点,moveX, moveY 计算两者的差 deltaX = moveX - startX;  deltaY = moveY - startY; 之后累加deltaX和deltaY: distX += Math.abs(deltaX) distY += Math.abs(deltaY) if (distX > dis

移动端touch触屏滑动事件、滑动触屏事件监听!

移动端touch触屏滑动事件.滑动触屏事件监听! 一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小

Js判断H5上下滑动方向及滑动到顶部和底部判断

昨天一位做移动端H5开发的同事说,H5滑动方向要实时判断向下还是向上,但判断是否滑动到底部时判断有问题一直没解决,于是就去问度娘,搜了很多资料,大部分有重复,于是根据大家的资料借鉴学习,在大家的基础上写了一个小例子.功能主要时可以实时的判断上下滑动的方向,是否滑动到底部或顶部来做某些事件触发.例子中有使用到其他博客上的内容,如原作者看到请勿怪,如果例子中有错误的请大家指正.如果使用pc端浏览器查看请把浏览器设置为手机浏览器模式. <!DOCTYPE HTML> <html> <

判断UISrollview的滑动方向

很常用的一个功能,就记录下来了. -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { historyY = scrollView.contentOffset.y; } -(void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scrollView.contentOffset.y<historyY) { NSLog(@"down"); } els

关于手机端 手势滑动的方向的判断(方式一)

滑动屏幕    touchstart:接触屏幕时触发,touchmove:活动过程触发,touchend:离开屏幕时触发 首先获取手接触屏幕时的坐标X,Y //获取接触屏幕时的X和Y $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); 然后获取滑动的坐标,并使用

UIPanGestureRecognizer上下左右滑动方向判断算法

CGFloat const gestureMinimumTranslation = 20.0; typedef enum :NSInteger { kCameraMoveDirectionNone, kCameraMoveDirectionUp, kCameraMoveDirectionDown, kCameraMoveDirectionRight, kCameraMoveDirectionLeft } CameraMoveDirection; @interfaceViewController