触摸及手势事件

因为移动端设备没有鼠标和键盘，所以常规的鼠标和键盘事件不足以创建具有完整交互能力的网页。

触摸事件

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

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

触摸事件还提供了以下 3 个属性用于跟踪触点。

• touches：Touch 对象的数组，表示当前屏幕上的每个触点。
• targetTouches：Touch 对象的数组，表示特定于事件目标的触点。
• changedTouches：Touch 对象的数组，表示自上次用户动作之后变化的触点。

每个 Touch 对象都包含下列属性。

• target：触摸事件的事件目标。
• identifier：触点 ID。
• clientX：触点在视口中的 x 坐标。
• clientY：触点在视口中的 y 坐标。
• pageX：触点在页面上的 x 坐标。
• pageY：触点在页面上的 y 坐标。
• screenX：触点在屏幕上的 x 坐标。
• screenY：触点在屏幕上的 y 坐标。

这些属性可用于追踪屏幕上的触摸轨迹

惯性滑动

// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 MOMENTUM_TIME 且 move // 距离大于 MOMENTUM_DISTANCE 时，执行惯性滑动

function momentum(distance: number, duration: number) {
  const speed = Math.abs(distance / duration)

  distance = currentOffset.value + (speed / 0.003) * (distance < 0 ? -1 : 1)

  const index = getIndexByOffset(distance)

  currentDuration.value = +props.swipeDuration
  updateValueByIndex(index)
}