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