javascript七基础学习系列二千三百五十八：手势事件

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);
与触摸事件的例子一样，以上代码简单地将每个事件对应到一个处理函数，然后输出每个事件的信息。