原生 touch 事件仅提供坐标数据，不能直接识别滑动方向等语义动作；需手动计算位移向量并设阈值判断，或引入 hammer.js 等手势库应对复杂需求。
HTML 滑动（touchstart/touchmove/touchend）本身不能替代手势识别，它只是底层事件源；真正识别“滑动方向”“长按”“双指缩放”等语义动作，必须靠你自己写逻辑或引入手势库。
为什么原生 touch 事件不等于手势识别
浏览器只保证触发 touchstart、touchmove、touchend，但不会告诉你这次操作是“左滑”还是“上拉刷新”。比如：
-
touchmove只返回当前坐标，不带方向、速度、加速度信息 - 一次“快速左滑”可能只产生 3–5 个
touchmove，而“慢速拖拽”可能有几十个——仅靠数量无法区分意图 - 没有内置防抖、阈值判断、多点冲突处理（比如手指还没抬，又点了第二下）
手动实现滑动方向识别的关键三步
想用原生事件做基础滑动识别（如轮播图切换），核心是计算位移向量并过滤噪声：
- 在
touchstart记录startX/startY - 在
touchmove实时算deltaX = currentX - startX、deltaY = currentY - startY，但不立即响应，要等touchend才判断 - 在
touchend做最终决策：
— 如果Math.abs(deltaX) > Math.abs(deltaY) * 1.5且Math.abs(deltaX) > 30→ 判为水平滑动
— 否则忽略（可能是误触或点击）
注意：30px 是常见位移阈值，太小易误判，太大影响灵敏度；1.5 是方向偏好系数，防止斜向滑动被错分。
立即学习“前端免费学习笔记（深入）”；
什么时候该放弃手写，直接用 hammer.js 或 @use-gesture/react
一旦涉及以下任一需求，手写成本陡增，建议切手势库：
- 需要同时支持
pan（拖拽）、pinch（缩放）、rotate（旋转） - 要求精确的 velocity（如“快滑翻页，慢滑拖动”）
- 需兼容 PC 端
mouse事件（模拟 touch 行为） - 项目已用 React/Vue，希望手势响应与组件状态联动（如
onDrag触发setState）
例如用 @use-gesture/react 监听水平滑动只需：
const bind = useDrag(({ offset: [x], last }) => {
if (last) {
if (x > 100) handleNext()
else if (x < -100) handlePrev()
}
})它自动做了节流、速度计算、多点清理——这些你手写一遍至少 200 行。
混合使用时最容易漏掉的兼容细节
把 HTML 滑动和手势库混用，常因事件冲突白忙活：
- 给元素加了
preventDefault()在touchmove，会导致hammer.js的pan失效（它依赖原生事件冒泡） - React 中用
onTouchStart+ 手写逻辑，但没加event.preventDefault()→ 页面会跟着手指滚动（尤其在 iOS Safari） - 多个手势监听器嵌套（如外层轮播监听
swipe，内层卡片监听tap），没配recognizeWith或requireFailure→ 事件被吃掉
真正在意体验的项目，滑动不是“能动就行”，而是“动得准、不卡、不打架”。别高估自己对 touch 事件相位、时间戳、设备像素比差异的掌控力。
