移动端交互手势详解及实现

一丶概述  
    如今移动端设备大行其道，前端也走进了移动的领域。在写移动端页面的交互效果的时候，我么难免要接触一些复杂的手势，而不仅仅像pc端那样简单的鼠标事件。手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式，这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感操作的逐步发展的过程。

二丶移动端手势事件  
    在浏览器中，为我们提供的手势并不算多，主要有：

1.         touchstart 当手指触摸屏幕时触发
2.         touchmove 当手指在屏幕滑动时不断的触发
3.         touchend 当手指从屏幕上移开时触发
4.         touchcancel 当系统停止跟踪触摸时触发

    是不是感觉很少，safari还为我们提供了三个独有的手势事件(用于复杂的手势)，然而也仅仅只能在safari中使用  

1.         gesturestart 当一个手指已经按在屏幕上，另一个手指也按上时触发
2.         gesturechange 当触摸屏幕上任何一个手指发生变化时触发
3.         gestureend 当任何一个手指从屏幕上移开时触发

    
    最后呢，让我们看看移动设备上究竟有哪儿手势需要我们使用  
  

三丶让JS支持这些手势  
    目前看来，我们能用的也就只有touchstart，touchmove, touchend, touchcancel这四个手势，那么如何才能利用这四个手势支持众多的交互效果呢？首先我们从最简单的手势开始。简单的手势也就是说是单点触控，我们主要来实现如下几个手势：</