touch gesture 事件在移动端的简单实现

问题描述：

ipad上不支持元素的拖拽事件

解决方法：

给元素添加触摸（touch、gesture）事件

触摸事件介绍：

    touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发（与点击事件冲突）。

　touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

　touchend事件：当手指从屏幕上离开的时候触发。

　touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明。

    每个触摸事件都包括了三个触摸列表：

    1. touches：当前位于屏幕上的所有手指的一个列表。

    2. targetTouches：位于当前DOM元素上的手指的一个列表。

    3. changedTouches：涉及当前事件的手指的一个列表。

简单案例：

Gesture事件 - - 实现手势缩放图片：

Gesture事件，包括手指点击（click），轻拂（flick），双击（double-click），手指的分开、闭合（scale）、转动（rotate）等一切手指能在屏幕上做的事情

gesture事件触发过程：

Step 1、第一根手指放下，触发touchstart

Step 2、第二根手指放下，触发gesturestart

Step 3、触发第二根手指的touchstart

Step 4、立即触发gesturechange

Step 5、手指移动，持续触发gesturechange，就像鼠标在屏幕上移动的时候不停触发mousemove一样

Step 6、第二根手指提起，触发gestureend，以后将不会再触发gesturechange

Step 7、触发第二根手指的touchend

Step 8、触发touchstart！注意，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart

Step 9、提起第一根手指，触发touchend

缩放图片的简单代码：

var startRotation = event.rotation;

var startScale = event.scale;

e.target.style.webkitTransform = ‘scale(‘ + e.scale + startScale + ‘) rotate(‘ + e.rotation +startRotation + ‘deg)’;

或者：$(e.target).css('width' , startWidth * e.scale);

参考资料：

浅谈Web前端开发中的Touch事件 

HTML5的javascript gesture事件

平板_手机开发_13 个处理触摸事件和多点触摸的JS 库