zoukankan      html  css  js  c++  java
  • 如何判断touch事件滑动的方向?

    场景:touch滑动有上,下,左,右四个方向,如何判断其滑动的方向?

    措施:1.根据移动的值正负来判断

      //滑动处理
       var startX, startY, moveEndX, moveEndY, X, Y;   
       mybody.addEventListener('touchstart', function(e) {
           e.preventDefault();
           startX = e.touches[0].pageX;
           startY = e.touches[0].pageY;
       }, false);
       mybody.addEventListener('touchmove', function(e) {
           e.preventDefault();
           moveEndX = e.changedTouches[0].pageX;
           moveEndY = e.changedTouches[0].pageY;
           X = moveEndX - startX;
           Y = moveEndY - startY;
           if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
               alert("向右");
           } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
               alert("向左");
          } else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
               alert("向下");
          }else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
               alert("向上");
          } else{
               alert("没滑动");
          }
        });

               2.根据角度来判断方向

           //返回角度
            function GetSlideAngle(dx, dy) {
                return Math.atan2(dy, dx) * 180 / Math.PI;
            }
            //根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动
            function GetSlideDirection(startX, startY, endX, endY) {
                var dy = startY - endY;
                var dx = endX - startX;
                var result = 0;
                //如果滑动距离太短
                if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
                    return result;
                }
                var angle = GetSlideAngle(dx, dy);
                if (angle >= -45 && angle < 45) {
                    result = 4;
                } else if (angle >= 45 && angle < 135) {
                    result = 1;
                } else if (angle >= -135 && angle < -45) {
                    result = 2;
                } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
                    result = 3;
                }
                return result;
            }
            //滑动处理
            var startX, startY;
            mybody.addEventListener('touchstart', function (ev) {
                ev.preventDefault();
                startX = ev.touches[0].pageX;
                startY = ev.touches[0].pageY;
            }, false);
            mybody.addEventListener('touchmove', function (ev) {
                var endX, endY;
                ev.preventDefault();
                endX = ev.changedTouches[0].pageX;
                endY = ev.changedTouches[0].pageY;
                var direction = GetSlideDirection(startX, startY, endX, endY);
                switch (direction) {
                    case 0:
                        alert("没滑动");
                        break;
                    case 1:
                        alert("向上");
                        break;
                    case 2:
                        alert("向下");
                        break;
                    case 3:
                        alert("向左");
                        break;
                    case 4:
                        alert("向右");
                        break;
                    default:
                }
            }, false);
  • 相关阅读:
    让数据更精准,神器标配:热图
    运维监控大数据的提取与分析
    IT运营新世界大会:广通软件开启双态运维大时代
    持续交付的Mesos与Docker导入篇
    运算符
    Django 模型层(2)
    Django模型层
    Django的模板层
    Django的视图层
    Django的路由层(URLconf)
  • 原文地址:https://www.cnblogs.com/juicy-initial/p/11530601.html
Copyright © 2011-2022 走看看