Apr 14, 2014 - javascript, 前端    No Comments

对于移动端浏览器touch事件的研究总结(6)gesture

在移动设备上感觉除了最最常用的单指滑动外,第二常用的就是双指的拉伸,旋转等等了。所以苹果在ios 2.0的safari中又引入了一组手势事件。当两个手指触摸屏幕时就会产生手势,或拉伸放大,或旋转。

gesture事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend三个事件回调:

  • gesturestart: 当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
  • gesturechange: 当触摸屏幕的任何一个手指的位置发生变化时触发。
  • gestureend: 当任何一个手指从屏幕上面移开时触发。


gesture事件提供一个gesture event对象,该对象包含以下属性:

  • rotation: 使用手指旋转的角度。
  • scale: 用户使用手指进行pinch和push操作时产生的一个倍数。如果大于1,用户则在进行push操作,小于1,则用户在进行pinch操作。

当同时监听了gesture事件和touch事件,则事件触发模式如下:

  1. touchstart 第一个手指接触屏幕时触发
  2. gesturestart 第二个手指接触屏幕时触发
  3. touchstart 第二个手指接触屏幕时触发
  4. gesturechange 两个手指都在屏幕上时,每次手指在屏幕上移动时触发
  5. gestureend 第二个手指 离开屏幕时触发, 以后将不会再触发gesturechange
  6. touchend 第二个手指 离开屏幕时触发
  7. touchstart!注意,多根手指在屏幕上,提起一根,会刷新一次全局touch!重新触发第一根手指的touchstart,这点和苹果官方网站上介绍的不同。
  8. touchend 第一个手指 离开屏幕时触发

再来弄一个小例子,效果很简单,两根手指点到屏幕上出现一个以两指间距离为对角线的矩形。矩形可随手指缩放和旋转。
例子在这里:http://aresli.com/demo/touch-event/touch7.html
代码请直接查看源代码!

Got anything to say? Go ahead and leave a comment!