移动端手势识别需绑定具体元素并立即调用preventDefault()，用touches而非changedTouches记录初始位置，累积位移加阈值判断方向，tap需控制时间窗与位移容差，iOS必须禁用默认行为否则手势失效。
touchstart / touchmove / touchend 是基础，但别直接监听 document
移动端手势识别必须从原生触摸事件入手，touchstart、touchmove、touchend 是核心三件套。但直接在 document 或 body 上监听，常导致事件被拦截或触发不全——尤其在 iOS Safari 中，touchstart 默认会延迟 300ms（为双击缩放留余地），且某些元素（如 、）会主动阻止默认行为。
实操建议：
- 绑定到具体容器元素（比如
document.getElementById('canvas')），而非全局 - 在
touchstart回调中立即调用event.preventDefault()，禁用缩放和滚动干扰（前提是该区域不需要原生滚动） - 用
event.touches（当前所有接触点）而非event.changedTouches（本次事件变化的点）来计算初始位置，避免单指变双指时坐标丢失
识别滑动方向不能只看 deltaX / deltaY
简单用 Math.abs(dx) > Math.abs(dy) 判左右，看似合理，实则容易误判：手指轻微抖动、启动加速阶段、或快速转向时，初始几帧位移噪声大，直接算差值会导致“左滑突然跳成上滑”。
更稳的做法是累积位移 + 设阈值 + 看终态趋势：
立即学习“Java免费学习笔记（深入）”；
- 在
touchstart记录startX = event.touches[0].clientX - 在
touchmove累加totalX += event.touches[0].clientX - lastX（并更新lastX） - 只在
touchend时判断：Math.abs(totalX) > 30 && Math.abs(totalX) > Math.abs(totalY) * 1.5 - 避免在
touchmove中频繁触发逻辑，防卡顿
tap 和 doubletap 要防误触，也得处理 iOS click 延迟
原生 click 在 iOS 上有约 300ms 延迟，所以手势库基本都绕开它。自己实现 tap，关键不是“松手就触发”，而是控制时间窗和位移容差：
- 记录
touchstart时间戳startTime和起始坐标startX/startY -
touchend时检查：elapsed 且Math.hypot(endX - startX, endY - startY) - doubletap 需缓存上一次 tap 的时间戳，两次间隔
- 务必在
touchstart里event.preventDefault()，否则 iOS 可能先触发 zoom 再触发你的 tap
iOS 和 Android 的 touches 列表行为差异真实存在
Android Chrome 多数情况下 event.touches 顺序稳定（按按下顺序），而 iOS Safari 在快速多指操作中可能重排；更麻烦的是：当一个手指抬起，iOS 有时会把剩下手指的 identifier 重置（变成 0），导致你基于 identifier 追踪手指的逻辑失效。
应对策略：
- 不要依赖
touches[0]永远是主指——改用Array.from(event.touches).find(t => t.identifier === lastId) - 对 pinch（双指缩放）检测，优先用
getBoundingClientRect()算两点中心+距离变化，而非硬记 identifier - 测试时务必真机跑 iOS 16+ 和 Android 13+，模拟器无法复现部分 touches 顺序异常
const el = document.getElementById('gesture-area');
let startX = 0, startY = 0, startTime = 0, lastId = null;
el.addEventListener('touchstart', e => {
e.preventDefault();
if (e.touches.length === 1) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
startTime = Date.now();
lastId = e.touches[0].identifier;
}
});
el.addEventListener('touchend', e => {
if (e.changedTouches.length === 1 && e.changedTouches[0].identifier === lastId) {
const dx = e.changedTouches[0].clientX - startX;
const dy = e.changedTouches[0].clientY - startY;
const dt = Date.now() - startTime;
if (dt < 250 && Math.hypot(dx, dy) < 20) {
console.log('tap detected');
}
}
});
移动端手势没标准 API，靠事件组合 + 容错逻辑撑起来。最易忽略的其实是 iOS 对 touchstart.preventDefault() 的强依赖——漏掉这一句，90% 的自定义手势在 iPhone 上都会半途失效。
