touch事件的简单封装

在Q群有很多人在问touch事件怎么去监控它的左右滑动，于是乎有时间我就萌生了封装touch对象的想法。

利用ES6的新特性class写的touch类，下面来详情介绍一下我的思路：利用ES6的新特性class写的touch类，下面来详情介绍一下我的思路：

下面这个object存放的是用于判断事件的各种参数，它在touchstart、touchmove、touchend的过程中绑定相关数据达到最终的判断结果，具体将过程在后面介绍。

this.obj = {
  x1: 0,  // 初始横坐标
  y1: 0,  // 初始纵坐标
  timeStart: 0, // 初始时间戳
  x2: 0,  // 结束横坐标
  y2: 0,  // 结束纵坐标
  timeEnd: 0, // 结束时间戳
  x: 50,  // 横坐标的容错值
  y: 50,  // 纵坐标的容错值
  interval: 200,  // 有效时间间隔
  sX: 0, // 存放横坐标差
  sY: 0, // 存放纵坐标差
  sTime: 0,  // 存放touch事件的时间长度
  getXandYandTime: function () { // 获取坐标差，和touch时间的长度
    this.sX = this.x2 - this.x1
    this.sY = this.y2 - this.y1
    this.sTime = this.timeEnd - this.timeStart
  },
  len: 0 // 记录多少个触摸点
}

下面的object是一个事件委托的列表，每一种事件都用一个列表来存放，避免多次绑定造成的覆盖影响。

this.event = {
  touch: [],
  longTouch: [],
  leftMove: [],
  rightMove: [],
  topMove: [],
  bottomMove: []
}

下面是核心代码，touch事件的判断逻辑。touchstart记录初始坐标值，touchmove跟踪最终坐标点，在touchend或touchcancel根据sX、sY、sTime等参数来判断是什么事件。