JavaScript移动端

常见的触屏事件：

1. touchstart:手指触摸到一个DOM元素时触发
2. touchmove:手指在一个DOM元素上滑动时触发
3. touchend:手指从一个DOM元素上移开时触发

触摸事件对象（TouchEvent）:一类描述手指在触摸平面的状态变化的事件。这类事件多用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少等。

1. touches:正在触摸屏幕的所有手指的一个列表，手指离开没有这个列表
2. targetTouches:正在触摸当前DOM元素上的手指的一个列表，手指离开没有这个列表。最经常使用。
3. changedTouches:手指状态发生了改变的列表，从无到有，从有到无变化，手指离开有这个列表

移动端拖动元素

1. touchstart、touchmove、touchend可以实现拖动元素。
2. 但是拖动元素需要当前手指的坐标值，我们可以使用targetTouched[0]里面的pageX和pageY
3. 移动端拖动的原理：手指移动中，计算手指移动的距离。然后用盒子原来的位置+手指移动的距离
4. 手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置
   拖动元素三步曲：
   (1). 触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
   (2).移动手指touchmove：计算手指滑动的距离，并且移动盒子
   (3).离开手指touchend
   注意：手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动e.preventDefault();

移动端常见的特效

classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上的版本才支持。
该属性用于在元素中添加，一处及切换CSS类。

1. 添加类：element.classList.add(‘类名’)；
2. 移除类：element.classList.remove(‘类名’)；
3. 切换类：element.classList.toggle(‘类名’)；开关灯的使用