iOS 2.0 中的Safari 还增加了一种手势事件。手势事件会在两个手指触碰屏幕且相对距离或旋转角度
变化时触发。手势事件有以下3 种。
gesturestart:一个手指已经放在屏幕上,再把另一个手指放到屏幕上时触发。
gesturechange:任何一个手指在屏幕上的位置发生变化时触发。
gestureend:其中一个手指离开屏幕时触发。
只有在两个手指同时接触事件接收者时,这些事件才会触发。在一个元素上设置事件处理程序,意
味着两个手指必须都在元素边界以内才能触发手势事件(这个元素就是事件目标)。因为这些事件会冒
泡,所以也可以把事件处理程序放到文档级别,从而可以处理所有手势事件。使用这种方式时,事件的
目标就是两个手指均位于其边界内的元素。
触摸事件和手势事件存在一定的关系。当一个手指放在屏幕上时,会触发touchstart 事件。当另
一个手指放到屏幕上时,gesturestart 事件会首先触发,然后紧接着触发这个手指的touchstart
事件。如果两个手指或其中一个手指移动,则会触发gesturechange 事件。只要其中一个手指离开屏
幕,就会触发gestureend 事件,紧接着触发该手指的touchend 事件。
与触摸事件类似,每个手势事件的event 对象都包含所有标准的鼠标事件属性:bubbles、
cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、
ctrlKey 和metaKey。新增的两个event 对象属性是rotation 和scale。rotation 属性表示手指
变化旋转的度数,负值表示逆时针旋转,正值表示顺时针旋转(从0 开始)。scale 属性表示两指之间
距离变化(对捏)的程度。开始时为1,然后随着距离增大或缩小相应地增大或缩小。
可以像下面这样使用手势事件的属性:
function handleGestureEvent(event) {
let output = document.getElementById(“output”);
switch(event.type) {
case “gesturestart”:
output.innerHTML += Gesture started:
+
rotation=${event.rotation},
+
scale=${event.scale}
;
break;
case “gestureend”:
output.innerHTML += Gesture ended:
+
rotation=${event.rotation},
+
scale=${event.scale}
;
break;
case “gesturechange”:
output.innerHTML += Gesture changed:
+
rotation=${event.rotation},
+
scale=${event.scale}
;
break;
}
}
document.addEventListener(“gesturestart”, handleGestureEvent, false);
document.addEventListener(“gestureend”, handleGestureEvent, false);
document.addEventListener(“gesturechange”, handleGestureEvent, false);
与触摸事件的例子一样,以上代码简单地将每个事件对应到一个处理函数,然后输出每个事件的信息。
v
08-12
227
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
06-12
377
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
05-22
325
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
07-06
411
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-27
2029
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-29
609
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-31
278
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)