移动端触屏事件

触屏touch事件 

touchstart	手指触摸到一个DOM元素时触发
touchmove	手指压在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

触摸事件对象（TouchEvent）

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无变化

移动端拖动元素

1. touchstart、touchmove、touchend可以实现拖动元素
2. 但是拖动元素需要当前手指的坐标值 我们可以用targetTouches[0]里面的pageX和pageY
3. 移动端拖动原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
4. 手指移动的距离：手指滑动中的位置 - 手指刚开始触摸的位置

拖动元素三部曲：

1. 触摸元素touchstart: 获取手指的初始坐标，同时获得盒子原来的位置
2. 移动手指touchmve: 计算手指的滑动距离，并且移动盒子
3. 离开手指touchend;

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();