最近一个前端工单项目有个"右滑返回"的需求，以前没有去了解相关知识，趁着这个需求，正好了解一下相关知识点
项目功能需求
在APP端容器运行前端代码，由于前端代码采用vue+webpack的方式，而且试图内容较多，不便于直接加"返回"按钮，同时也为了方便，所以才有右滑返回的的形式
技术原理
采用原生js的触摸事件，根据起点(x0, y0)和（x1, y1）组成的直线，因为普通滑动很难是一条绝对水平的直线，这里根据其斜率和方向，只要斜率的绝对值小于1，即可认为是右滑动。
触摸事件种类
- touchstart 触摸开始时触发
- touchmove 触摸后，手指移动时一直在触发
- touchend 手指离开时触发
- touchcancle 系统停止跟踪时触发（一般不使用）
部分属性
| target | 类型 | 说明 |
|---|---|---|
| target | EventTaget | 事件触发发目标 |
| type | DOMString | 事件类型 |
| bubbles | Boolean | 是否冒泡 |
| cancelable | Boolean | 事件能否取消 |
| touches | TouchList | 当前屏幕上所有的触摸点的集合 |
| targetTouches | TouchList | 绑定事件的那个节点上，所有触摸点的集合 |
| changedTouches | TouchList | 触摸点发生 改变的集合。注意：当触发touchend时，touches属性和targetTouches属性中的touchList长度为空，这时候要想取得触发点的信息，就必须使用changeTouches |
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("右滑动")
}
}
}
