原生js右滑动手势

最近一个前端工单项目有个"右滑返回"的需求，以前没有去了解相关知识，趁着这个需求，正好了解一下相关知识点

项目功能需求

在APP端容器运行前端代码，由于前端代码采用vue+webpack的方式，而且试图内容较多，不便于直接加"返回"按钮，同时也为了方便，所以才有右滑返回的的形式

技术原理

采用原生js的触摸事件，根据起点(x₀, y₀)和（x₁, y₁）组成的直线，因为普通滑动很难是一条绝对水平的直线，这里根据其斜率和方向，只要斜率的绝对值小于1，即可认为是右滑动。

触摸事件种类

1. touchstart 触摸开始时触发
2. touchmove 触摸后，手指移动时一直在触发
3. touchend 手指离开时触发
4. touchcancle 系统停止跟踪时触发（一般不使用）

部分属性

vue代码示例

function startTouch(evt) {
    // 缓存起始位置信息
    this.touchStartTaget = evt.targetTouches[0]
  }
function endTouch(evt) {
    const endTouch = evt.changedTouches[0]
    const startTouch = this.touchStartTaget
    const deltaX = endTouch.clientX - startTouch.clientX
    const deltaY = endTouch.clientY - startTouch.clientY
    // 向右滑, x轴有效长应大于100px
    if (deltaX > 50) {
      // 上下偏移量小于45°
      if (Math.abs(deltaY) / deltaX <= 1) {
        // 认为 ”右滑动“
        console.log("右滑动")
      }
    }
  }