pointer events是当前最稳的跨设备选择，它统一处理鼠标、触摸、触控笔事件，通过pointerid和pointertype精准追踪多点输入，避免touch事件的丢点、类型混淆与被动监听卡顿问题。
触控屏硬件本身不决定用哪个HTML交互函数工具，真正起作用的是浏览器对事件模型的支持程度和你如何协调底层事件与上层逻辑。现代触控屏（如iPhone、iPad、Android平板）在系统层已统一将多点输入转为标准事件流，关键在于你选的JS接口能否稳定接收、区分、响应这些事件。
touchstart/touchmove/touchend 是否还够用
够用，但有硬伤：它们只暴露原始触摸点，不区分输入源（比如无法知道是手指还是触控笔），且在iOS Safari中，touchmove默认被标记为passive: true，一旦调用preventDefault()就可能触发卡顿或失焦；更严重的是，双指缩放时touches.length === 2只在首帧可靠，后续touchmove可能因浏览器优化丢点，导致距离计算跳变。如果你只做单指拖拽或简单滑动，它依然轻量直接；但要做双指缩放+旋转+长按组合，就得自己补大量状态校验和防抖逻辑。
Pointer Events 是当前最稳的跨设备选择
它把鼠标、触摸、触控笔全归一为pointerdown/pointermove/pointercancel，每个事件带event.pointerId和event.pointerType，天然支持多点追踪。实操时注意三点：
- 必须用
Map缓存活跃指针，pointerdown存入{ x, y, timestamp }，pointermove只更新已有pointerId，不新增 - 判断双指缩放不能只看
activePointers.size === 2，要加时间窗过滤：两个点的timestamp差需 -
pointerdown阶段就要e.preventDefault()，否则Safari可能仍触发惯性滚动；缩放容器必须设touch-action: none，否则手势被截断
Interact.js 这类库在多点场景下容易踩坑
它默认给绑定元素加touch-action: none，这会直接禁掉所有多点触控——不是bug，是浏览器规范强制行为。想让双指缩放生效，必须显式设touch-action: pinch-zoom并关闭draggable，否则resize和gesture事件会竞争。iOS上还有个隐藏问题：transform: scale()会导致触控坐标映射偏移，建议直接改style.width/style.height而非用transform。如果你的场景是“单指拖拽 + 双指缩放 + 四角调整”，得手动分层切换模式，每次调用interaction.stop()清理前序状态。
Hammer.js 适合快速原型但难深度定制
它封装了pinch、rotate等手势，event.deltaScale直接可用，省去距离/角度计算。但它内部仍基于touch事件，在iOS 17+和Chrome 115+里对touch-action: manipulation处理更严，可能导致缩放卡顿；而且它不暴露原始指针ID，一旦需要混合鼠标滚轮+双指缩放（比如编辑器），状态同步就会出问题。真要跨设备统一响应，不如直接用原生Pointer Events。
最易被忽略的一点：不是所有双指操作都算有效缩放。iPadOS某些版本下，双指长按会触发右键菜单；Safari里缩放目标若含<input>，软键盘可能异常弹出——这些都不是事件没收到，而是系统级干预，必须在缩放期间临时移除tabindex或用contenteditable="false"锁住焦点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
