# 将取消视为完整的输入路径

> 当浏览器取消指针时，安全地结束拖动和保持操作，并避免滚动、旋转或中断后控件卡住。

- URL: https://oneshotgems.ai/zh-Hans/topics/pointer-cancellation-in-games
- 类别: 游戏开发者指南
- 类型: 指南
- 更新日期: 2026年10月5日

指针交互并不总是以 pointerup 结束。当触摸转为页面滚动或缩放，或者设备或浏览器无法继续发送该指针的事件时，浏览器可能会取消交互。如果游戏状态机没有处理取消，拖动的对象可能会一直被抓住，按住触发的动作也可能无法停止。

## 使清理操作具备幂等性

当 pointerdown 开始拖动时，存储当前的 pointerId，以及与之关联的对象或操作。pointerup 和 pointercancel 都应该结束该交互并清除其状态。让清理函数可以安全地重复调用，即使该操作此前已经结束也不会产生问题；这简化了处理捕获丢失、窗口变化和重复防御清理的过程。

如果使用指针捕获，请侦听lostpointercapture，将其作为交互不再拥有指针的另一个信号。除非游戏明确定义了该结果，否则请勿将取消视为成功放置。取消的拖动可能会将对象返回到其起始位置、保留最后的有效位置或取消移动；选择一项规则并通过视觉反馈告知玩家。

## 测试浏览器手势接管

尝试从游戏表面开始并继续向屏幕边缘拖动、从表面开始垂直页面滚动、按住期间旋转以及第二根手指触摸其他地方。确认取消后没有角色继续移动并且没有按钮在视觉上保持按下状态。

touch-action 属性影响浏览器处理的手势。 MDN 解释说，浏览器在接管平移或缩放时可以派发 pointercancel。将取消视为交互模型必须处理的正常结果。

## 常见问题

**Pointercancel 是指针向上失败吗？** 这是一个单独的信号，表明指针将不再继续当前的交互。运行清理并应用游戏的取消规则，而不是假设操作已完成。

**触摸操作可以防止每次指针取消吗？** 不会。它指导浏览器处理触摸手势，但其他条件仍然可以结束指针传递。即使游戏表面具有自定义手势规则，也保持取消处理。

## 跟随好奇心探索

- [使用指针事件进行浏览器游戏输入](https://oneshotgems.ai/zh-Hans/topics/pointer-events-for-games): 通过指针事件对鼠标、笔和触摸进行建模，同时在游戏循环中保留捕获、设备标识和兼容性行为。
- [设计网页游戏的触控操作](https://oneshotgems.ai/zh-Hans/topics/touch-controls-for-web-games): 设计触控交互时，要考虑浏览器手势、清晰的视觉反馈和明确的指针状态，让游戏在手机上也能做出可预期的响应。

## 延伸阅读

- [MDN：指针取消事件](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event)
- [MDN：触摸操作](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action)

---
规范页面: https://oneshotgems.ai/zh-Hans/topics/pointer-cancellation-in-games