一：基本触摸事件

1：onTouchStart‌：手指触摸屏幕时触发

2：onTouchMove‌：手指在屏幕上滑动时持续触发

3：onTouchEnd‌：手指离开屏幕时触发

4：onTouchCancel‌：系统中断触摸时触发

function TouchDemo() {
  const handleTouchStart = (e) => {
    console.log('触摸开始', e.touches[0].clientX);
  }
  
  const handleTouchMove = (e) => {
    console.log('触摸移动', e.touches[0].clientY);
  }
  
  return (
    <div 
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      style={{ height: '200px', background: '#f0f0f0' }}
    >
      触摸区域
    </div>
  );
}

二：事件对象关键属性

1：touches 当前所有活动触摸点的坐标数组

2：changedTouches 本次事件中发生变化的触摸点信息

3：targetTouches 当前元素上的有效触摸点集合

4：clientX/clientY 触摸点相对于视口的坐标（不包含滚动偏移）

5：pageX/pageY 触摸点相对于文档的坐标（包含滚动偏移）

三：拓展

1：‌Touchable 组件

onPress：单击事件

onLongPress：长按事件

onPressIn/onPressOut：触摸开始/结束的精确控制

<TouchableOpacity onPress={handleClick}>
  <Text>可点击按钮</Text>
</TouchableOpacity>

2：PanResponder 手势系统（用于处理复杂手势）

onPanResponderGrant：触摸被识别为有效手势

onPanResponderMove：手指移动时的坐标更新 ‌‌

onPanResponderRelease：手势完成后的回调

四：总结

1：‌跨平台适配‌

Web 端优先使用 onTouch* 事件实现基础交互

React Native 项目应通过 Touchable 组件统一交互体验 ‌‌

2：‌性能优化‌

避免在 onTouchMove 中执行高频率操作，需使用节流（throttle）控制

在 React Native 中，滑动列表建议使用 ScrollView 的 onScroll 系列事件 ‌‌

3：‌事件代理机制‌

React 通过顶层事件代理统一管理所有触摸事件，减少内存消耗并提升性能

五：兼容性

1：多指触控=>通过 touches 数组获取所有触点坐标

2：iOS 长按延迟=>使用 onLongPress 替代原生长按事件

3：Android 涟漪效果=>采用 TouchableNativeFeedback 组件