指尖下的js —— 多触式web前端开发之三：处理复杂手势
转自:http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-3.html
事件是对touch event的更高层的封装，和touch一样，它同样包括gesturestart，gesturechange，
gestureend三个事件回调：
gesturestart // 当有两根或多根手指放到屏幕上的时候触发 gesturechange // 当有两根或多根手指在屏幕上，并且有手指移动的时候触发 gestureend // 当倒数第二根手指提起的时候触发，结束gesture |
事件处理函数中会得到一个GestureEvent类型的参数，它包含了手指的scale（两根移动过程中分开的比例
）信息和rotation（两根手指间连线转动的角度）信息。
当两根或以上的手指在屏幕上活动的时候，我们可以做出一些较为复杂的手势。这将涉及到普通的mouse事
件，touch事件和gesture事件，情况比较复杂。touch已经在第一篇文章里详细介绍，这里就简单带过。
我们还是先看看当分别将两根手指放到屏幕上的时候，会触发哪些事件吧：
1、第一根手指放下，触发touchstart，除此之外什么都不会发生（请参照第二篇文章，手指提起才会触发
mouse的各事件）
2、第二根手指放下，触发gesturestart
3、触发第二根手指的touchstart
4、立即触发gesturechange
5、手指移动，持续触发gesturechange，就像鼠标在屏幕上移动的时候不停触发mousemove一样
6、第二根手指提起，触发gestureend，以后将不会再触发gesturechange
7、触发第二根手指的touchend
8、触发touchstart！注意，和第一篇文章里介绍的一样，多根手指在屏幕上，提起一根，会刷新一次全局
touch！重新触发第一根手指的touchstart，这点和苹果官方网站上介绍的不同。
9、提起第一根手指，触发touchend
Gesture事件的处理和Touch类似，我们一般会在gesturechange的时候利用GestureEvent对象中的信息来
做一些事情：
var angle = event.rotation; var scale = event.scale; |
这样能够取得scale和rotation信息，然后我们可以：
e.target.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation + startRotation + 'deg)'; |
这段代码能让element随着你的两根手指的运动而转动、伸展。以下是一段测试代码，请用
ipad/iphone/android打开： http://wanglingshu.com/wp-content/uploads/ios-gesture.html
还有一件要说明的事情是，对于复杂手势，是否会触发某些鼠标事件？确实有，不过我只找到了一个。不管
你的两根手指在屏幕上伸缩还是转动，都不会有任何鼠标事件触发，但当你的两根手指同时朝上或者朝下移动
的时候，则会触发某些事件。请看下图：
两根手指同时向上或向下滚动，如果target element是一个scrollable element（也就是绑定了mousewheel的
element）的话，将会触发mousewheel事件。如果不是scrollable element，则当手指停止移动的时候，会触
发onscoll。这里请和第二篇文章的body scroll区别一下，如果你要滚动body，只需要一根手指轻轻拂动屏幕
，但是你要滚动一个内部div或者iframe，则需要动用两根手指。 这也是多触式设备一个不太方便的地方。而对于我们开发者来说，这种不方便被放大了。。。因为从用户体
验角度来说，要求用户使用两根手指滚动一个内部element显然是不合适的，而要实现像滚动body一样用一根
手指优雅地滚动，我们必须利用touchevent，在它的回调函数中用代码来实现scroll。这里介绍一个段很不错的
多触式滚动组件：iscroll-4
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
用起来很简单，new一个iScroll对象，传入需要滚动的inner element作为参数就行了。
