键盘事件必须绑定到document才能持续响应，需用keydown/keyup维护键状态对象并在requestanimationframe中统一处理，同时对方向键等调用preventdefault阻止默认行为。
键盘事件必须绑定到 document 才能持续响应
很多开发者把 keydown 事件监听器加在某个 <canvas></canvas> 或 <div> 元素上，结果按方向键没反应——因为焦点不在该元素，<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>不会派发事件。HTML5 动画（尤其是全屏 <a style="color:#f60; text-decoration:underline;" title="canva" href="https://www.php.cn/zt/110101.html" target="_blank">canva</a>s 游戏）需要全局键盘响应，<strong>唯一可靠的方式是监听 <code>document。
- 不要用
canvas.addEventListener('keydown', ...)（无效） - 必须用
document.addEventListener('keydown', ...) - 如果页面有输入框等可聚焦元素，需确保它们失焦（
input.blur()）或用event.preventDefault()阻止默认行为干扰动画逻辑 - 移动端不触发
keydown，纯触控场景需另配虚拟按键
用 keydown + keyup 实现“按键按下中”状态判断
仅靠单次 keydown 事件无法知道某个键是否“正被按住”，这对动画中的持续移动（如角色行走）至关重要。正确做法是维护一个键状态对象，在 keydown 设为 true，keyup 设为 false，动画主循环里查这个状态。
const keys = {};
document.addEventListener('keydown', e => { keys[e.code] = true; });
document.addEventListener('keyup', e => { keys[e.code] = false; });
// 动画帧内（如 requestAnimationFrame 回调中）
if (keys['ArrowRight']) { player.x += 5; }
if (keys['ArrowUp']) { player.y -= 5; }
-
e.code比e.key更稳定（不受大小写/输入法影响），推荐用于方向键、空格、Shift 等物理按键识别 - 避免用
e.keyCode（已废弃）或e.which（兼容性差） - 别在事件回调里直接更新动画状态——容易丢帧；只更新键状态，由主循环统一处理
防止重复触发：禁用浏览器默认滚动和表单行为
方向键、空格键、PageUp/PageDown 在浏览器中有默认行为（滚动页面、切换焦点、翻页），会干扰动画控制，甚至导致页面意外跳动。
- 在
keydown监听器中加event.preventDefault()是必要操作 - 但不能无差别阻止——比如用户想在输入框里打字，此时应放过事件；建议只对已知游戏/动画上下文生效
- 常见需阻止的键码：
'ArrowUp'、'ArrowDown'、'ArrowLeft'、'ArrowRight'、' '（空格）、'PageUp'、'PageDown' - 注意：阻止空格后，页面内
<button></button>无法用空格激活，若需兼顾可加条件判断（如只在 canvas 获得焦点时阻止）
Canvas 动画中键盘响应延迟高？检查 requestAnimationFrame 同步逻辑
即使键状态更新及时，动画也可能“卡半拍”——根本原因常是键盘状态读取时机不对。比如在 keydown 里立刻修改位置，但下一帧还没渲染，用户感知就是延迟。
立即学习“前端免费学习笔记（深入）”；
- 所有状态变更（包括键盘驱动的位置、速度、朝向）必须放在
requestAnimationFrame回调里统一计算和绘制 - 不要在事件中直接调用
ctx.fillRect()或修改 DOM —— 这会强制同步重绘，破坏帧率稳定性 - 若使用时间步长（delta time）做物理模拟，键状态也必须参与该时间步计算，否则高速连按会出现位移跳跃
- 调试技巧：在动画循环开头打印
keys['ArrowRight']值，确认它与按键动作实时一致，排除事件丢失可能
document 绑定漏掉、preventDefault 忘加、还有把键处理逻辑错放到事件回调而非动画帧内。
