事件之触摸及手势事件

一 触摸事件

触发场景：当手指放在屏幕上、在屏幕上滑动或从屏幕移开 时，触摸事件即会触发

触摸事件：

事件	定义
touchstar	手指放到屏幕上时触发（即使有一个手指已经放在了屏幕上）
touchmove	手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止滚动
touchend	手指从屏幕上移开时触发
touchcancel	系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪

属性大全：

• 鼠标事件的公共属性：bubbles、 cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey
• 用于跟踪触点的属性
  • touches：Touch 对象的数组，表示当前屏幕上的每个触点
  • targetTouches：Touch 对象的数组，表示特定于事件目标的触点
  • changedTouches：Touch 对象的数组，表示自上次用户动作之后变化的触点。
  • 每个 Touch 对象都包含下列属性:
    • clientX：触点在视口中的 x 坐标
    • clientY：触点在视口中的 y 坐标
    • identifier：触点 ID
    • pageX：触点在页面上的 x 坐标
    • pageY：触点在页面上的 y 坐标
    • screenX：触点在屏幕上的 x 坐标
    • screenY：触点在屏幕上的 y 坐标
    • target：触摸事件的事件目标。

 触发顺序：当手指点触屏幕上的元素时，依次会发生如下事件（包括鼠标事件）

• (1) touchstart
• (2) mouseover
• (3) mousemove（1 次）
• (4) mousedown
• (5) mouseup
• (6) click
• (7) touchend

function handleTouchEvent(event) { 
 // 只针对一个触点
 if (event.touches.length == 1) { 
 let output = document.getElementById("output"); 
 switch(event.type) { 
 case "touchstart": 
 output.innerHTML += `<br>Touch started:` + 
 `(${event.touches[0].clientX}` + 
 ` ${event.touches[0].clientY})`; 
 break; 
 case "touchend": 
 output.innerHTML += `<br>Touch ended:` + 
 `(${event.changedTouches[0].clientX}` + 
 ` ${event.changedTouches[0].clientY})`; 
 break; 
 case "touchmove": 
 event.preventDefault(); // 阻止滚动
 output.innerHTML += `<br>Touch moved:` + 
 `(${event.changedTouches[0].clientX}` + 
 ` ${event.changedTouches[0].clientY})`; 
 break; 
 } 
 } 
} 
document.addEventListener("touchstart", handleTouchEvent); 
document.addEventListener("touchend", handleTouchEvent); 
document.addEventListener("touchmove", handleTouchEvent); 

// 以上代码会追踪屏幕上的一个触点。为简单起见，代码只会在屏幕有一个触点时输出信息。
// 在touchstart 事件触发时，触点的位置信息会输出到 output 元素中。
// 在 touchmove 事件触发时，会取消默认行为以阻止滚动（移动触点通常会滚动页面），并输出变化的触点信息。
// 在 touchend 事件触发时，会输出触点最后的信息。注意，touchend 事件触发时 touches 集合中什么也没有，这是因为没有滚动的触点了。此时必须使用 changedTouches 集合

二 手势事件

定义：手势事件会在两个手指触碰屏幕且相对距离或旋转角度变化时触发

事件：

• gesturestart：一个手指已经放在屏幕上，再把另一个手指放到屏幕上时触发
• gesturechange：任何一个手指在屏幕上的位置发生变化时触发
• gestureend：其中一个手指离开屏幕时触发

属性：

• 含所有标准的鼠标事件属性：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); 

三 两者关系

• 当一个手指放在屏幕上时，会触发 touchstart 事件。
• 当另 一个手指放到屏幕上时，gesturestart 事件会首先触发，然后紧接着触发这个手指的 touchstart 事件。
• 如果两个手指或其中一个手指移动，则会触发 gesturechange 事件。
• 只要其中一个手指离开屏幕，就会触发 gestureend 事件，紧接着触发该手指的 touchend 事件