pointerevents 可统一响应鼠标滚轮、双指缩放、触控笔捏合，避免 touch/mouse 事件混用导致的逻辑分裂与 ios 卡顿；需用 map 缓存活跃 pointerid 并校验双点时间一致性，而非仅依赖 pointermove 时的数量判断。
直接用 pointerdown/pointermove/pointercancel 跟踪多个 pointerId，就能在编辑器里实现鼠标滚轮、双指缩放、触控笔捏合统一响应——不需要 polyfill，现代浏览器（Chrome 55+、Firefox 59+、Safari 13.1+、Edge 全版本）原生支持。
为什么不能只监听 touchstart/touchmove
编辑器常需同时响应鼠标拖拽选区、触控笔书写、双指缩放三类操作。若只用 touchstart，鼠标滚轮缩放会失效；若混用 mousewheel 和 touchmove，逻辑分裂、状态难同步，且 iOS Safari 对 touchmove 的 preventDefault() 处理极敏感，易卡顿或失焦。PointerEvents 用一套事件流覆盖全部输入源，event.pointerType 可区分是 "touch" 还是 "mouse"，缩放逻辑复用率接近 100%。
如何正确缓存并计算两点距离与角度
关键不是“有没有两个点”，而是“是否在同一帧内稳定存在两个活跃 pointerId”。常见错误是只靠 pointermove 时的 pointers.size === 2 判断，但实际可能刚进一个、旧的一个还没 pointerup，造成误触发。
- 用
Map缓存所有活跃指针：const activePointers = new Map()，pointerdown时存入{ x: e.clientX, y: e.clientY, timestamp: Date.now() } -
pointermove中只更新已存在的pointerId，不新增；剔除超过 100ms 未更新的旧点（防悬停残留） - 仅当
activePointers.size === 2且两个点的timestamp差 - 距离用
Math.hypot(dx, dy)，角度用Math.atan2(dy, dx)，避免浮点误差累积
缩放操作必须绕开编辑器默认行为
编辑器内容区（如 contenteditable 或 canvas）通常自带滚动、文字选中、光标定位等默认行为，双指缩放时若没拦截，会触发页面滚动或文本高亮干扰。
- 在
pointerdown阶段就调用e.preventDefault()—— 注意不是在pointermove，否则 Safari 可能仍触发惯性滚动 - 对缩放容器设
touch-action: none，禁用浏览器原生缩放/滚动，把控制权完全交给 JS - 缩放后用
transform: scale(x)+transform-origin控制锚点，别改font-size或zoom，否则破坏编辑器布局计算 - iOS Safari 下，若缩放目标含
<input>，需额外在缩放期间临时移除其tabindex，否则软键盘可能异常弹出
容易被忽略的兼容细节
不是所有“双指”都算有效缩放：Safari 在某些 iPadOS 版本下，双指长按会触发右键菜单；Windows Ink 笔的 pointerType === "pen" 但默认不支持多点，需检查 e.isPrimary 是否为 false 才纳入缩放计算；而 Chrome 桌面版模拟触控时，pointerId 可能复用，导致旧点未清理干净。
真正可靠的判断依据是：两个 pointerId 同时存在于 activePointers，且它们的 clientX/clientY 变化趋势符合缩放特征（距离单调增/减，角度变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
