touchstart/touchmove/touchend需调用preventDefault()才能持续触发，否则浏览器优先执行原生滚动；应仅在目标容器绑定事件，touchstart阶段判断手势意图再阻止默认行为；多点触控须用targetTouches计算中心点和缩放比；CSS transform需配合will-change和translate3d启用硬件加速；调试需用Chrome Sensors模拟触摸并启用移动设备模式；务必处理touchcancel以重置状态。
touchstart/touchmove/touchend 事件必须阻止默认行为才能持续触发
很多开发者发现 touchmove 只触发一次或根本没反应，核心原因是浏览器在移动端对滚动区域做了默认处理。只要没调用 event.preventDefault()，系统会优先执行原生滚动，中断手势监听链。
- 仅在需要自定义拖拽/缩放的容器上绑定事件，避免给
<body>或全屏元素加，否则影响页面正常滚动 - 在
touchstart阶段就判断是否进入手势意图（比如双指距离 > 30px 视为缩放），满足条件再preventDefault，否则保留滚动 - Chrome Android 和 Safari 对
passive: false的支持有差异，显式声明更稳妥：element.addEventListener('touchmove', handler, { passive: false });
计算多点触控中心点和缩放比例要用 targetTouches 而非 changedTouches
changedTouches 只包含本次事件中状态变化的触摸点（比如刚抬起的手指），而缩放、旋转需要稳定跟踪所有当前按下的点。必须用 event.targetTouches —— 它始终返回该元素上所有活跃触摸点的实时快照。
- 双指缩放比例 = 当前两指距离 / 初始两指距离，距离用勾股定理算：
Math.hypot(x1-x2, y1-y2) - 中心点坐标要转换为相对于目标元素的 client 坐标：
const rect = element.getBoundingClientRect(); const centerX = (t1.clientX + t2.clientX) / 2 - rect.left; const centerY = (t1.clientY + t2.clientY) / 2 - rect.top;
- 别直接用
pageX/Y，它受页面滚动影响，会导致手势漂移
CSS transform 动画要搭配 will-change 和 translate3d 触发硬件加速
纯靠 JS 修改 style.transform 做手势反馈时，若没启用 GPU 加速，iOS Safari 和部分安卓 WebView 会出现明显卡顿，尤其缩放+平移叠加场景。
- 初始样式必须设
will-change: transform，且至少触发一次 3D 变换（哪怕translate3d(0, 0, 0)）才能激活图层合成 - 所有手势更新都走
transform: scale(s) translate3d(x, y, 0)，避免混用left/top等触发布局重排的属性 - Android Chrome 对
will-change过度使用反而降低性能，建议只在手势开始时动态添加，结束时移除
PC 浏览器调试触摸事件得靠 Chrome DevTools 的 Sensors 面板
本地开发时无法真机测试，但模拟器容易漏掉关键细节：比如 touchcancel 在手指快速滑出元素边界时触发，或 touches.length 突然归零——这些在 PC 模拟里默认不还原。
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → ⋯ → More Tools → Sensors → Touch emulation → 启用，并选 “Emulate touch and pen”
- 务必勾选 “Emulate mobile” 并设置设备尺寸，否则
targetTouches可能为空（因 viewport 缩放影响坐标计算） - 真机调试优先用
chrome://inspect连接 Android，iOS 需通过 Safari Web Inspector，且需开启 “Web Inspector” 系统设置
手势逻辑本身不难，难的是各种边界情况：手指误触、快速进出、系统级手势冲突（如 iOS 底部上滑）、WebView 内核差异。最常被忽略的是 touchcancel 的处理——它不等于 touchend，意味着手势被系统强行中断，此时必须重置所有状态，否则下次 touchstart 会沿用错误的初始距离。
