html5触摸事件判断滑动方向的实现

为了给触摸界面提供有力支持, 触摸事件提供了响应用户对触摸屏或者触摸板上操作的能力.

接口

TouchEvent

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。每 个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 TouchList 对象代表多个触点的一个列表.

触摸事件的类型

为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.tyPE 属性来确定当前事件属于哪种类型

1. touchstart：当用户在触摸平面上放置了一个触点时触发。

2. touchend：当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。

3. touchmove：当用户在触摸平面上移动触点时触发。

4. touchcancel：当触点由于某些原因被中断时触发。

判断滑动方向

基本原理就是记录开始滑动（touchStart）和结束滑动（touchEnd）的坐标位置，然后进行相对位置的计算。

touchStart:function(e){
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
        e = e || window.event;
 }
,touchEnd:function(e){
        const that = this;
        endX = e.changedTouches[0].pageX;
        endY = e.changedTouches[0].pageY;
        that.upOrDown(startX,startY,endX,endY);
}
,upOrDown:function (startX, startY, endX, endY) {
        const that = this;
        let direction = that.GetSlideDirection(startX, startY, endX, endY);
    swITch(direction) {
          case 0:        console.LOG("没滑动");
            break;
          case 1:        console.log("向上");
            break;
          case 2:        console.log("向下");
            break;
          case 3:        console.log("向左");
            break;
          case 4:        console.log("向右");
            break;
          default:        break;
    }
  }
,//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动  GetSlideDirection:function (startX, startY, endX, endY) {
        const that = this;
        let dy = startY - endY;
        let dx = endX - startX;
        let result = 0;
        //如果滑动距离太短    if(Math.abs(dx)  2 &
    &
 Math.abs(dy)  2) {
          return result;
    }
        let angle = that.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;
  }
,  //返回角度  GetSlideAngle:function (dx, dy) {
        return Math.atan2(dy, dx) * 180 / Math.PI;
  }
    

原生JS方法

除了H5新增的方法外，还可以用原生JS判断view的滑动方向，代码如下（可直接运行）：

要注意的是chrome对document.body.scrollTop一直是0，需要改成document.documentElement.scrollTop

!DOCTYPE html>
    html>
    head>
      meta charset="utf-8">
      title>
     脚本之家(jb51.net)/title>
      style>
    p {
          border: 1px solid black;
          width: 200px;
          height: 100px;
          overflow: scroll;
    }
      /style>
    /head>
    body style="overflow: scroll">
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    h1>
    HEllo word/h1>
    script>
  function scroll( fn ) {
    VAR beforeScrollTop = document.documentElement.scrollTop,      fn = fn || function() {
}
    ;
        console.log('beforeScrollTop',beforeScrollTop);
    window.addEventListener("scroll", function() {
          var afterScrollTop = document.documentElement.scrollTop,        delta = afterScrollTop - beforeScrollTop;
          console.log('beforeScrollTop',beforeScrollTop);
          console.log('afterScrollTop',afterScrollTop);
          if( delta === 0 ) return false;
          fn( delta >
     0 ? "down" : "up" );
          beforeScrollTop = afterScrollTop;
    }
    , false);
  }
  scroll(function(direction) {
 console.log(direction) }
    );
    /script>
    /body>
    /html>
    

相关推荐：

HTML5中的强制下载属性download使用

HTML5 canvas实现文本对齐的方法总结

以上就是html5触摸事件判断滑动方向的实现的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！