hammer.js 因自2016年停更、不兼容ios 13+ pointer events且与原生手势事件冲突，已不推荐使用；应改用原生pointerevent配合getcoalescedevents()实现轻量手势识别。
Hammer.js 为什么在现代移动端开发中基本不推荐用了
它已经停止维护多年（最后发布是 2016 年的 v2.0.8），不兼容 iOS 13+ 的 Pointer Events 行为，且与现代浏览器原生 touch-action、gesture-event 以及 PointerEvent 冲突严重。你在真机上遇到“捏合没反应”“旋转触发两次”“滑动卡顿”，大概率不是配置问题，而是库本身已无法正确处理当前系统的手势调度逻辑。
替代方案：用原生 PointerEvent + getCoalescedEvents() 做轻量手势识别
不需要引入任何第三方库，Chrome / Safari / Firefox 均已稳定支持。核心思路是捕获连续的指针事件流，通过坐标差值和时间戳算出缩放比例与旋转角度：
-
pointerdown记录初始双指位置与时间戳 -
pointermove中调用event.getCoalescedEvents()获取高采样率轨迹点，避免丢帧 - 用两指距离变化算
scale，用向量夹角变化算rotation - 务必在
pointerdown时设置event.target.setPointerCapture(event.pointerId)，防止手指移出元素后中断事件
示例关键片段：
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
element.addEventListener('pointerdown', e => {
if (e.buttons !== 1 || e.pressure <h3>如果必须用 Hammer.js，怎么绕过常见兼容性坑</h3><p>仅限遗留项目维护场景。以下三点不做到，90% 的手势会失效：</p>
- 在初始化前加
document.body.style.touchAction = 'none'，否则 iOS Safari 会劫持 pinch/rotate - 用
new Hammer.Manager(element)替代new Hammer(element)，再手动 addnew Hammer.Pinch()和new Hammer.Rotate()，避免默认 recognizer 冲突 - 监听
pinchstart后立刻调用ev.preventDefault()，并阻止touchmove默认行为（否则页面会滚动） - 注意
Hammer.Pinch的threshold默认是0.1，实际需设为0.01才能响应微小捏合
真正要小心的是 CSS 层级和事件穿透
很多“手势不触发”问题其实和 JS 无关。检查这三处：
- 目标元素是否被
position: fixed或transform包裹？某些安卓 WebView 下会丢失touchstart事件流 - 父容器是否有
overflow: hidden且未设touch-action: manipulation？会导致 pinch 被截断 - 是否在
pointerdown里动态创建了遮罩层（如 loading spinner）？新图层可能盖住后续pointermove的命中区域
最稳妥的验证方式：在 pointerdown 里 console.log(e.touches?.length)，看是否能稳定输出 2 —— 如果连这个都拿不到，就别调手势算法了，先修 DOM 结构和 CSS 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
