JavaScript手势识别需监听touchstart、touchmove、touchend事件，通过位移、速度、角度、间距等特征判断滑动、缩放、长按等类型；须阻止默认行为并手动计算，如滑动需|dx|>|dy|且|dx|>30，缩放依赖两点距离比值，长按要求时间≥500ms且无显著移动。
JavaScript 实现手势识别，核心是监听并解析触摸事件（touchstart、touchmove、touchend），再通过计算位移、速度、角度、间距等特征判断手势类型（如滑动、缩放、长按、双击）。原生 Web API 不提供高级手势识别，需手动实现逻辑或借助成熟库。
监听基础触摸事件
触摸事件必须绑定在支持触摸的元素上（如 <div>），且需阻止默认行为（如页面滚动）以确保手势逻辑可控：
-
touchstart：记录初始触点位置（touches[0].clientX/Y）、触点数量、时间戳 -
touchmove：持续获取当前坐标，计算位移、速度；注意调用event.preventDefault()阻止滚动干扰 -
touchend：结合起始与结束数据，判断是否构成有效手势（如滑动距离 > 30px）
识别常见手势的关键计算
不同手势依赖不同数学特征：
-
单指滑动（Swipe）：比较
startX → endX和startY → endY的差值，取绝对值较大方向；水平滑动需满足Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 30 -
双指缩放（Pinch/Zoom）：用
touches[0]和touches[1]计算两点间距离变化（Math.hypot(dx, dy)），对比起始与当前间距比值 -
长按（Long Press）：在
touchstart记录时间，在touchend判断间隔是否 ≥ 500ms，且期间无显著移动（位移 -
双击（Double Tap）：缓存上次点击时间与位置，两次
touchend间隔
使用 Hammer.js 等成熟库快速集成
手动实现易出错且兼容性差。推荐使用轻量级手势库：
立即学习“Java免费学习笔记（深入）”；
-
Hammer.js：支持 pan、pinch、press、tap、rotate 等，API 简洁：
new Hammer(element).on('swipe', handler) - React Native / Ionic：移动端框架内置手势系统，无需手动监听底层 Touch 事件
-
现代替代方案：如
@use-gesture/react（React）或interact.js（通用拖拽/缩放），更契合现代开发流程
注意事项与兼容性处理
实际开发中需规避常见陷阱：
- 移动端 Safari 默认禁用部分
touchmove的preventDefault，需在 CSS 中添加touch-action: none显式关闭浏览器默认手势（如缩放、滑动） - 避免同时监听
click和touchend，防止重复触发；可用evt.cancelable && evt.preventDefault()抑制 click - PC 浏览器不触发触摸事件，需 fallback 到
mousedown/mousemove/mouseup，或统一用 Pointer Events（pointerdown等）提升兼容性
