自行封装移动端touch事件

网上查阅也参考了几个示例，感觉有些思路过于繁琐，自己也是刚接触前端的小白（去年），于是，为了锻炼下自己的js水平，决定按自己的思路简单封装下，功能包括如下：

• touchStart： 触摸开始
• swipeLeft： 快速左拉
• swipeRight： 快速右拉
• swipeUp： 快速上拉
• swipeDown： 快速下拉
• dragVertical： 垂直方向滑动
• dragHorizontal： 水平方向滑动
• drag： 拖拽
• tag： 轻击
• longTag： 长按
• touchEnd：触摸结束

简单说一下原理

主要就是通过三大事件（touchstart，touchmove，touchend）来判断用户的手势，然后分别派发对应的事件处理函数（自定义的）。首先要清楚几个问题：

1、轻击、长按这些事件并不只是在一个点触发，由于用户操作习惯的不同，点击时可能会发生几个像素偏移，似乎有的手机还有误差值（没测试过）；
2、涉及到方向的事件，需要计算角度值，只需要计算出水平、垂直的方向就能得到其它的方向了

角度计算：

如图，有颜色部分为垂直方向，其他为水平方向，A点为touchstart起始点，B点为手指，x、y为横轴、纵轴位移距离（绝对值）。要计算很简单咯，首先要处理上面的问题1，既然有误差，那就让x或者y大于一个值时再去计算角度，这里假设为4（这个值越大越不精准，太小会发生问题1），当手指在一个方向上位移距离>=4，就立即计算角度，然而角度其实也不用计算，直角三角形规律，x和y是相等时是45°，x > y时角度小于45°（B点垂直向下移），也就是水平方向，反之就是垂直方向。就算这里不取45度角也可以用同一个原理。

//1、判断水平滑过屏幕条件：x轴必须有位移。位移距离大于4，并且此时x > y

x !== 0 && x >= 4 && x > y

//2、判断垂直滑过屏幕条件：y轴必须有位移。位移距离大于4，并且此时y > x

y !== 0 && y >= 4 && x < y

//3、判断向右滑过屏幕条件：满足条件1时

A.x - B.x < 0

//4、判断向左滑过屏幕条件：满足条件1时

A.x - B.x > 0

//5、判断向上滑过屏幕条件：满足条件2时

A.y - B.y < 0

//6、判断向下滑过屏幕条件：满足条件2时

A.y - B.y > 0