本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture手势事件（目前只是一个概念，使用的时候需封装模拟）
使用到的是移动端的Chrome浏览器，本文只对该浏览器进行调试，其他浏览器暂未考虑到
一、事件定义及分类
1. click事件
单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟
2. touch类事件
触摸事件，有touchstart touchmove touchend touchcancel 四种之分
touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发
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：手指在屏幕上向下滑动时会触发
二、事件的触发
页面结构：
1 <style type="text/css"> 2 #test { 3 overflow: hidden; 4 margin: 50px auto; 5 width: 300px; 6 height: 300px; 7 border: 1px solid #ccc; 8 } 9 .one, 10 .two { 11 float: left; 12 margin: 10px; 13 width: 100px; 14 height: 100px; 15 text-align: center; 16 line-height: 100px; 17 font-size: 32px; 18 } 19 .one { 20 background-color: #ccc; 21 } 22 .two { 23 background-color: #999; 24 } 25 </style> 26 27 28 <div id="test"> 29 <div class="one">one</div> 30 <div class="two">two</div> 31 </div>