interact.js 的 touch-action 冲突导致多点触控失效，需显式设置 pinch-zoom 并配合 gesturable；resize 不响应双指开合，须禁用 resizable 改用 gesturable 手动映射 scale；ios 拖拽延迟需加内联 touch-action: none；单指拖拽+双指缩放+四角调整需分层切换模式并调用 interaction.stop()。
Interact.js 的 touch-action CSS 属性冲突会导致多点触控失效
默认情况下，interact() 绑定的元素会自动设置 touch-action: none，这能禁用浏览器原生缩放/滚动，但也会阻止多点触控（如双指缩放、三指拖拽）被正确分发到 Interact.js 的 gesturemove 或 resizemove 事件。这不是 bug，而是浏览器规范行为：一旦 touch-action: none 生效，所有多点触控序列都会被拦截，仅保留单点拖拽。
解决方法是显式启用所需的手势：
- 若需双指缩放 + 单指拖拽：在目标元素上加
style="touch-action: pinch-zoom;"，并确保调用interact(target).gesturable({ onmove: ... }) - 若需双指缩放 + 单指调整大小（非拖拽）：必须禁用默认拖拽（
.draggable(false)），否则touch-action: pinch-zoom与拖拽冲突，导致缩放卡顿 - Android Chrome 115+ 对
touch-action: manipulation处理更严格，建议避免使用，优先选pinch-zoom或none+ 手动 preventDefault
resize() 在触屏设备上无法响应双指开合的常见原因
Interact.js 的 resize() 默认只响应鼠标右键拖边或按住 Shift 键的单点拖拽，不识别原生双指缩放手势——它不是“缩放”，而是“调整容器四边尺寸”。要让双指开合触发 resize，必须配合 gesturable() 并手动映射缩放比例到宽高变更。
实操要点：
- 不能同时启用
.resizable(true)和.gesturable(true)在同一元素上，否则事件竞争导致 resize 拦截失败 - 推荐做法：关闭
resizable，只开gesturable，在onmove中读取event.ds（缩放距离差），按比例更新element.style.width和element.style.height - 注意
event.interaction.rect在双指 gesture 中不可靠，应基于初始尺寸 +event.scale计算，例如：newWidth = baseWidth * event.scale - iOS Safari 对
transform: scale()的触控坐标映射有偏差，建议直接改style.width/style.height而非用 transform
drag() 在 iOS 上出现“拖一下就停”或“延迟半秒才动”
这是 iOS WebKit 的 scroll prevention 机制在作祟：当元素可滚动（比如父容器有 overflow: auto）且未明确声明 touch-action: none 时，系统会等待约 300ms 判断用户是要滚动还是拖拽，导致首帧卡顿。
修复方式很直接：
- 给 draggable 元素加内联样式
style="touch-action: none;"（必须是内联，CSS 类可能被覆盖） - 确保其任意可滚动祖先元素（如
或 modal wrapper）没有overscroll-behavior: contain，该属性会阻断 touchstart 传递 - 不要依赖
interact(target).draggable({ inertia: true })来“弥补”延迟——inertia 是释放后的惯性，不解决初始响应问题 - 测试时禁用
preventDefault()在touchmove上的全局调用（尤其某些 UI 库会偷偷加），它和 Interact.js 的 touch-action 设置互斥
如何让同一个元素支持单指拖拽 + 双指缩放 + 四角调整大小
Interact.js 不支持“一套配置打天下”。真实场景中，你需要分层控制交互模式，而不是堆叠所有 draggable/resizable/gesturable。
可行路径是用视觉反馈切换状态：
- 默认状态（单指拖拽）：启用
draggable，禁用其他；监听tap事件，短按两次进入“缩放/调整”模式 - 缩放模式：关闭
draggable，启用gesturable，用event.scale更新尺寸；双指松开后自动切回拖拽模式 - 调整大小模式（如点击右下角手柄）：此时禁用
gesturable，启用resizable，但限定只响应从手柄区域发起的pointerdown（通过interactable.checkPointer()过滤） - 关键细节：所有模式切换时，必须调用
interaction.stop()显式终止当前交互，否则残留的move事件会干扰新逻辑
最易被忽略的是事件冒泡层级：如果拖拽容器内嵌了可点击按钮，务必在按钮上设 touch-action: manipulation 并阻止 pointerdown 冒泡，否则一次点击可能同时触发 drag start 和 button click。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
