面试题：React 的触摸事件有哪些？

在 React 中，为了支持移动设备上的触摸交互，提供了一系列触摸事件（Touch Events）。这些事件与原生 DOM 的触摸事件一一对应，但遵循 React 的合成事件系统（SyntheticEvent），并采用驼峰命名法。

以下是 React 中主要的触摸事件：

---

核心触摸事件

这些是最常用的触摸事件，用于处理用户的手指触摸操作。

React 事件名	触发时机
onTouchStart	当一个手指触摸到屏幕时触发。
onTouchMove	当手指在屏幕上移动时持续触发。
onTouchEnd	当一个手指离开屏幕时触发。
onTouchCancel	当触摸被系统中断（如来电、弹窗）时触发。

示例：实现一个简单的触摸拖拽效果

function TouchBox() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleTouchStart = (e) => {
    console.log('触摸开始', e.touches[0].clientX, e.touches[0].clientY);
  };

  const handleTouchMove = (e) => {
    // 阻止默认滚动行为，以便实现自定义拖拽
    e.preventDefault();
    
    const touch = e.touches[0];
    setPosition({
      x: touch.clientX,
      y: touch.clientY
    });
  };

  const handleTouchEnd = (e) => {
    console.log('触摸结束');
  };

  return (
    <div 
      style={{
        width: '100px',
        height: '100px',
        background: 'blue',
        position: 'absolute',
        left: position.x,
        top: position.y
      }}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      // 注意：如果需要阻止页面滚动，可能还需要 onTouchStart 和 onTouchMove 上调用 e.preventDefault()
    >
      拖拽我
    </div>
  );
}

---

触摸事件对象 (TouchEvent) 的关键属性

React 的触摸事件对象是 SyntheticEvent，其 nativeEvent 属性包含原生的 TouchEvent。常用属性包括：

• touches: 当前所有仍在触摸屏幕的手指列表（TouchList）。
• targetTouches: 当前位于目标元素上的手指列表。
• changedTouches: 最近一次事件（如 touchend）中状态改变的手指列表。
• 每个 Touch 对象包含：
  • identifier: 手指的唯一标识符（可用于多点触控追踪）。
  • clientX, clientY: 相对于视口的坐标。
  • pageX, pageY: 相对于整个页面的坐标。
  • screenX, screenY: 相对于屏幕的坐标。

---

高级触摸事件（较少使用）

React 事件名	触发时机
onTouchEnter	当手指移入元素边界时触发（注意：此事件支持度差，不推荐使用）。
onTouchLeave	当手指移出元素边界时触发（同样，支持度有限）。

重要提示：onTouchEnter 和 onTouchLeave 在大多数浏览器中并未实现或行为不一致，因此在实际开发中应避免依赖它们。

---

使用触摸事件的注意事项

1. 阻止默认行为： 移动端浏览器默认会对 touchmove 事件进行滚动或缩放。如果要实现自定义手势（如滑动、拖拽），通常需要在 onTouchMove 或 onTouchStart 中调用 e.preventDefault() 来阻止默认行为。
2. 性能优化： onTouchMove 触发非常频繁。如果处理逻辑复杂，建议使用防抖（debounce）或节流（throttle）来优化性能。
3. 跨平台兼容性： 考虑同时支持鼠标和触摸事件，以确保在桌面和移动设备上都有良好体验。
4. 多点触控： 使用 touches 列表可以实现双指缩放、旋转等复杂手势，但逻辑较为复杂，可考虑使用专门的手势库（如 hammer.js）。

---

总结

React 提供了完整的触摸事件支持，主要包括：

• ✅ onTouchStart
• ✅ onTouchMove
• ✅ onTouchEnd
• ✅ onTouchCancel

这些事件让你能够构建响应式的移动端交互。但在使用时需注意阻止默认行为、性能优化和跨平台兼容性。对于复杂手势，建议结合专业库来实现。