指尖下的js —— 多触式web前端开发之三:处理复杂手势 这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异)。这个 事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange, gestureend三个事件回调:
事件处理函数中会得到一个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对象中的信息来 做一些事情:
这样能够取得scale和rotation信息,然后我们可以:
两根手指同时向上或向下滚动,如果target element是一个scrollable element(也就是绑定了mousewheel的 |
|