如何防止键盘控制干扰鼠标驱动的滑块拼图

当拼图在鼠标操作期间对方向键做出反应时，原因通常是键盘监听器的范围过宽。绑定到 document 或 window 的处理器即使在玩家于线索字段中打字、使用菜单或与其他控件交互时，也能接收到方向键事件。它还可能在更改拼图的同时触发浏览器默认行为（例如滚动）。

通过一份简短的检查清单来重现问题：点击并拖动图块；拖过拼图边界；在拼图获得焦点时按方向键；然后在线索输入框、按钮或菜单获得焦点时按方向键。观察棋盘是否变化、页面是否滚动、焦点是否移动或拖动是否停止。这些观察结果有助于将拼图处理程序的问题与指针追踪或浏览器默认行为区分开来。

将棋盘视为一个具有明确键盘入口点的控件。使用可聚焦的棋盘容器，并仅在该棋盘处于活动状态或焦点位于棋盘所属的图块上时才处理拼图按键。将无关的控件（例如提示按钮和文本字段）保留在该按键处理边界之外。使焦点位置清晰可见，以便玩家能够判断棋盘何时会做出响应。

在解释按键之前检查事件目标（event target）。如果焦点位于输入框、文本区域、可编辑元素或独立的按钮中，请勿响应按键。对于协作式冒险工具，当一名玩家输入符文、名称或线索而另一名玩家正在操作拼图时，这一点尤为重要：打字输入不应意外触发图块移动。

键盘操作仍然需要正常工作。W3C 的指南指出，在可能的情况下，应通过键盘界面提供各项功能，并将“将对象移动到某个位置”确定为可以通过键盘操作的行为。应仔细限制按键的作用域，而不是将其完全移除。W3C：理解成功准则 2.1.1：键盘

为棋盘选择一套经过明确记录的精简按键集合，例如当棋盘聚焦时的方向键。在处理程序中，首先确认该按键是拼图所使用的按键，且棋盘是活动目标。只有在满足这些条件时，才执行移动，并在必要时取消该按键的浏览器默认行为。避免全局阻止所有按键：玩家可能需要正常打字、进行浏览器导航以及使用拼图之外的控件。

当事件可取消时，preventDefault() 可以取消浏览器默认行为，但它不会阻止事件传播到其他处理程序。这意味着它可以防止页面滚动，却无法解决同时也会移动图块的第二个监听器的问题。找出并缩小更改游戏状态的处理程序的范围；不要使用泛滥的事件取消来代替清晰的事件归属管理。MDN：Event：preventDefault() 方法

对于拖动交互，从开始拖动的按下操作到其释放或取消，全程追踪单个活动指针。指针事件（Pointer events）提供了 pointerdown、pointermove、pointerup 和 pointercancel；指针捕获（pointer capture）甚至可以在指针移出其原始命中区域时，将后续的指针事件持续定向到棋盘。在 pointerup 和 pointercancel 时都要清除活动拖动状态，以免中断的手势使拼图停留在卡住的拖动状态中。MDN：指针事件

避免以丢失指针追踪的方式重建或替换被拖动的图块。如果在拖动过程中界面在 DOM 中移动了元素，MDN 指出应在该移动操作之后设置指针捕获。明确当指针在无效位置释放时会发生什么：对于滑块拼图而言，将图块恢复到之前的位置或将其吸附到合法位置，比静默更改无关图块更容易被用户理解。

拼图可以同时支持鼠标、键盘和简单的指针输入。例如，点击或轻按空位相邻的图块可以移动它；拖动该图块可以保留为可选的直接操纵手势；而聚焦棋盘时的方向键可以提供键盘操作。这些输入都应该调用相同的移动验证逻辑，这样无论通过何种方式触发，移动的合法或拒绝判定都是一致的。

这也提供了一个实用的设计检查标准：玩家能否仅通过点击或轻按而不使用拖动来完成拼图？W3C 的 WCAG 2.2 指南将键盘访问与拖动的单指针替代方案视为不同的关注点。其示例包括使用点击方向控件来替代拖动。仅有键盘替代方案本身并不能提供这种单指针替代方案。W3C：理解成功准则 2.5.7：拖动动作

对于滑块拼图，一次点击一个相邻图块通常是一种自然的替代方案，因为它保留了拼图的相邻移动规则。如果这种交互不够明确，可见的移动按钮可以说明可用的方向。W3C 的 G219 技术给出了通过单指针控件执行相同底层操作而无需拖动的示例。W3C：G219：确保为作用于内容的拖动动作提供替代方案

在将拼图实际用于跑团之前，请在相同的棋盘布局和起始状态下，测试每一种输入路径。确认合法移动会更新一次棋盘，非法移动会保持棋盘不变，且无关控件保持其正常行为。

• **鼠标：**拖动合法图块，在棋盘外释放，并尝试进行非法移动。确认棋盘既不会丢失拖动状态，也不会发生意外变化。

• **键盘：**聚焦棋盘，使用每个支持的方向，然后将焦点移动到文本字段并打字。确认只有聚焦在棋盘上时的按键才会移动图块，且打字不会导致页面滚动或更改棋盘。

• **无需拖动的指针：**点击或轻按合法的相邻图块。确认它产生的移动与其他输入方式相同。

• **中断操作：**取消或放弃拖动，然后开始另一次拖动。确认没有残留失效的选中状态。

如果测试失败，请首先检查最相关的最底层部分：针对键盘行为，检查事件目标和焦点状态；针对中断的拖动，检查指针捕获和清理逻辑；针对规则不一致，检查通用的移动验证器。这一顺序为构建者提供了一种具体的排错方式，无需把冒险道具的代码变成一篇通用的控件教程。

• 指针事件 — MDN

• Event：preventDefault() 方法 — MDN

• 理解成功准则 2.1.1：键盘 — W3C WAI

• 理解成功准则 2.5.7：拖动动作 — W3C WAI

• G219：确保为作用于内容的拖动动作提供替代方案 — W3C WAI