👆 触摸事件处理

移动端最核心的交互是触摸。JavaScript 提供 Touch Events（多点触摸）和 Pointer Events（统一输入）两套体系。

Touch 事件体系

事件触发时机核心属性
touchstart手指触摸屏幕时touches（所有触点列表）
touchmove手指在屏幕上滑动时touches（所有触点列表）
touchend手指离开屏幕时changedTouches（变化的触点）
touchcancel触摸被中断时（如来电、通知）changedTouches

触摸事件实战：滑动方向判断

// ===== 判断滑动方向 =====
let startX = 0, startY = 0;

document.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
}, { passive: true });

document.addEventListener('touchend', (e) => {
  const endX = e.changedTouches[0].clientX;
  const endY = e.changedTouches[0].clientY;

  const diffX = endX - startX;
  const diffY = endY - startY;
  const threshold = 50; // 最小滑动距离(px)

  if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > threshold) {
    console.log(diffX > 0 ? '👉 右滑' : '👈 左滑');
  } else if (Math.abs(diffY) > threshold) {
    console.log(diffY > 0 ? '👇 下滑' : '👆 上滑');
  }
});

Pointer Events（推荐：统一鼠标 + 触摸）

Pointer Events 是 W3C 标准，统一了鼠标、触摸、触控笔，推荐在不需多指操作的场景使用。

// ===== Pointer Events（统一鼠标和触摸）=====
const box = document.getElementById('box');

box.addEventListener('pointerdown', (e) => {
  console.log('按下:', e.pointerType); // 'mouse' | 'touch' | 'pen'
  box.setPointerCapture(e.pointerId);  // 捕获指针，防止丢失
});

box.addEventListener('pointermove', (e) => {
  console.log(`移动: (${e.clientX}, ${e.clientY})`);
});

box.addEventListener('pointerup', (e) => {
  console.log('抬起:', e.pointerType);
  box.releasePointerCapture(e.pointerId);
});

box.addEventListener('pointercancel', (e) => {
  console.log('指针取消（如来电中断）');
});

移动端事件触发顺序

📋 完整事件触发顺序

touchstart → touchmove → touchend → (延迟 ~300ms) → mousedown → mouseup → click

理解这个顺序对于解决点击穿透等问题至关重要。