JavaScript基础——移动端网页特效

触屏事件

触屏事件概述

移动端浏览器兼容性较好，不需要考虑以前js的兼容性问题，可以放心地使用原生js书写效果，但是移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android和IOS都有。
touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或者触控笔）对屏幕或者触控板的操作。
常见的触屏事件如下：

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

触摸事件对象（TouchEvent）

TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的实践。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
touchstart、touchmove、touchend三个事件都会各自有事件对象。
触摸事件对象三个常见的对象列表：

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

因为一般都是给元素注册触摸事件，所以重点记住targetTouches

classList属性

class属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上的版本支持。
该属性用于在元素中添加，移除以及切换CSS类。有以下方法

添加类：

element.classList.add('类名');

删除类：

element.classList.remove('类名');

切换类：

element.classList.toggle('类名');

click延时解决方案

移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放（double tap to zoom）页面。
解决方案：

1. 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。

<meta name="viewport" content="user-scalable=no">

2. 利用touch事件自己封装这个事件解决300ms延迟。原理就是：
   1. 当我们手指触摸屏幕，记录当前触摸时间。
   2. 当我们手指离开屏幕，用离开的时间减去触摸的时间。
   3. 如果事件小于150ms，并且没有滑动屏幕，那么就定义为点击