移动端事件
一、事件定义及分类
1. click事件
单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟
2. touch类事件
触摸事件，有touchstart touchmove touchend touchcancel 四种之分
touchstart：手指触摸到屏幕会触发
ulw.addEventListener("touchstart", function (e) {
console.log(e.targetTouches[0]);
console.log(e.touches[0]); // 触摸是触发事件， 这个是最常用的
console.log(e.changedTouches[0]); // 触摸改变时触发事件，
});
touchmove：当手指在屏幕上移动时，会触发
ulw.addEventListener("touchmove", function (e) {
console.log(e);
console.log(e.targetTouches[0]);
console.log(e.touches[0]); // 触摸是触发事件， 这才是最常用的
console.log(e.changedTouches[0]); // 触摸改变时触发事件，
});
touchend：当手指离开屏幕时，会触发
ulw.addEventListener("touchend", function (e) {
touchend里面只有changedTouches[0]里面才有window坐标的那些属性。
console.log(e);
console.log(e.changedTouches[0]);
});
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
3. tap类事件
触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
4. swipe类事件
滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分
swipe：手指在屏幕上滑动时会触发
swipeLeft：手指在屏幕上向左滑动时会触发
swipeRight：手指在屏幕上向右滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
swipeDown：手指在屏幕上向下滑动时会触发
移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件
本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture手势事件（目前只是一个概念，使用的时候需封装模拟）
使用到的是移动端的Chrome浏览器，本文只对该浏览器进行调试，其他浏览器暂未考虑到
以下是四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发touchend: //手指离开屏幕时触发touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表targetTouches: //当前dom元素上手指的列表，尽量使用这个代替toucheschangedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：clientX / clientY: //触摸点相对浏览器窗口的位置pageX / pageY: //触摸点相对于页面的位置screenX / screenY: //触摸点相对于屏幕的位置identifier: //touch对象的IDtarget: //当前的DOM元素
注意：
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
1.禁止缩放通过meta元标签来设置。
2.禁止滚动preventDefault是阻止默认行为，touch事件的默认行为就是滚动。event.preventDefault();
touches记录的是屏幕上全部的触摸对象的信息
targetTouches记录的是当前DOM节点上全部的触摸对象的信息
changedTouches记录着触发该次事件的信息，一般长度为1
二、自定义手势事件gesture
手势事件只是概念型，目前还没有浏览器原生支持，按照概念可分为gesturestart gesturechange gestureend 三种事件
gesturestart：当有两根或多根手指放到屏幕上的时候触发
gesturechange：当有两根或多根手指在屏幕上，并且有手指移动的时候触发
gestureend：当倒数第二根手指提起的时候触发，结束gesture
按照定义，当分别将两根手指放到屏幕上的时候，会有如下顺序的事件触发：
1、第一根手指放下，触发touchstart
2、第二根手指放下，触发gesturestart
3、触发第二根手指的touchstart
4、立即触发gesturechange
5、手指移动，持续触发gesturechange
6、第二根手指提起，触发gestureend，以后将不会再触发gesturechange
7、触发第二根手指的touchend
8、触发touchstart（多根手指在屏幕上，提起一根，会刷新一次全局 touch，重新触发第一根手指的touchstart）
9、提起第一根手指，触发touchend
拖拽的案例
