在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等参数来判断是什么事件。