JavaScript多点触控手势处理依赖touchstart、touchmove、touchend事件协同，通过touches/targetTouches/changedTouches区分触摸点，用identifier跟踪手指生命周期，并结合位移、时间、点数等规则识别滑动、缩放、长按等手势，需注意兼容性与防误触优化。
JavaScript 处理多点触控手势，核心在于正确监听触摸事件、区分不同触摸点，并基于坐标与时间变化识别动作意图。它不依赖单一“手势事件”，而是通过 touchstart、touchmove、touchend 三个基础事件协同分析实现。
用 touches / targetTouches / changedTouches 区分手指状态
TouchEvent 对象提供三个关键类数组属性，用途各不相同：
- touches：当前屏幕上所有正在接触的触摸点（全局），适合需要全屏手势判断的场景，比如双指拖拽整个页面
- targetTouches：只包含初始落在当前绑定元素上的触摸点（即使手指移出该区域，只要没抬起来就仍在其中），推荐用于容器内手势，逻辑更可控
-
changedTouches：本次事件中“状态发生变化”的触摸点——
touchstart时是新按下的点，touchmove时是位置更新的点，touchend时是刚抬起的点；这是做精准响应（如记录起始位置、计算缩放比例）的关键依据
靠 identifier 跟踪同一根手指的完整生命周期
每个 Touch 对象都有一个只读的 identifier 属性，值为整数，在该手指从 touchstart 到 touchend 的整个过程中保持不变。这是多点触控不可替代的标识符：
- 没有它，无法区分两根手指先后按下时哪个是“第一指”、哪个是“第二指”
- 缩放手势中，需在
touchstart记录两个点的identifier和初始距离，再在touchmove中根据相同identifier匹配对应点，实时计算距离变化 - 避免用索引（如
touches[0]）硬取点——手指抬起后索引会重排，容易错位
结合位移、时间、点数做手势分类判断
手势识别本质是规则+阈值的组合，常见逻辑如下：
立即学习“Java免费学习笔记（深入）”；
-
单指滑动：记录
touchstart坐标，touchend时算 Δx/Δy，绝对值超过阈值（如 30px）且耗时短（如 < 300ms）即判定 -
双指缩放：
touchstart捕获两个点的identifier和初始距离；touchmove中重新匹配这两个点，计算当前距离，比值即缩放系数 -
长按：
touchstart记录时间戳，touchend或touchcancel时检查是否超时（如 ≥ 500ms），期间若触发touchmove则取消 -
防误触优化：在
touchmove中加event.preventDefault()阻止默认滚动；对高频移动做节流（如 requestAnimationFrame）避免卡顿
注意兼容性与边界情况
实际落地时几个易忽略点：
- iOS Safari 的
touchend有时不携带坐标，应优先从changedTouches取点，而非touches - 部分 Android 浏览器对
touchcancel触发较频繁（如弹窗、切后台），需在该事件中清理状态，防止手势中断后残留数据 - 用
'ontouchstart' in window检测设备支持，降级到鼠标事件或禁用手势逻辑 - 复杂手势建议引入 Hammer.js 等成熟库，避免重复造轮子；但理解底层机制仍是调试和定制的基础
