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

iOS 2.0 中的 Safari 还增加了一种手势事件。手势事件会在两个手指触碰屏幕且相对距离或旋转角度 变化时触发。手势事件有以下 3 种。
 gesturestart:一个手指已经放在屏幕上，再把另一个手指放到屏幕上时触发。
 gesturechange:任何一个手指在屏幕上的位置发生变化时触发。
 gestureend:其中一个手指离开屏幕时触发。 只有在两个手指同时接触事件接收者时，这些事件才会触发。在一个元素上设置事件处理程序，意
味着两个手指必须都在元素边界以内才能触发手势事件(这个元素就是事件目标)。因为这些事件会冒 泡，所以也可以把事件处理程序放到文档级别，从而可以处理所有手势事件。使用这种方式时，事件的 目标就是两个手指均位于其边界内的元素。
触摸事件和手势事件存在一定的关系。当一个手指放在屏幕上时，会触发 touchstart 事件。当另 一个手指放到屏幕上时，gesturestart 事件会首先触发，然后紧接着触发这个手指的 touchstart 事件。如果两个手指或其中一个手指移动，则会触发 gesturechange 事件。只要其中一个手指离开屏 幕，就会触发 gestureend 事件，紧接着触发该手指的 touchend 事件。
可以像下面这样使用手势事件的属性:

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},` +
break; }
`scale=${event.scale}`;
document.addEventListener("gesturestart", handleGestureEvent, false); document.addEventListener("gestureend", handleGestureEvent, false); document.addEventListener("gesturechange", handleGestureEvent, false);

与触摸事件的例子一样，以上代码简单地将每个事件对应到一个处理函数，然后输出每个事件的信息。