指尖下的js —— 多触式web前端开发之三：处理复杂手势-白红宇

指尖下的js —— 多触式web前端开发之三：处理复杂手势

阅读量：6252 次

发布时间：2019-06-22

本文共 1960 字，大约阅读时间需要 6 分钟。

这篇文章着重介绍多触式设备上特有的gesture event（android和iOS对这个事件的封装大同小异）。这个

事件是对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)'
; 
        
      