键盘事件必须绑定到document才能持续响应，需用keyDown/keyUp维护键状态对象并在requestAnimationFrame中统一处理，同时对方向键等调用preventDefault阻止默认行为。
键盘事件必须绑定到 document 才能持续响应
很多开发者把 仅靠单次 方向键、空格键、PageUp/PageDown 在浏览器中有默认行为（滚动页面、切换焦点、翻页），会干扰动画控制，甚至导致页面意外跳动。 即使键状态更新及时，动画也可能“卡半拍”——根本原因常是键盘状态读取时机不对。比如在 keydown 事件监听器加在某个 或 元素上，结果按方向键没反应——因为焦点不在该元素，浏览器不会派发事件。HTML5 动画（尤其是全屏 canvas 游戏）需要全局键盘响应，唯一可靠的方式是监听 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（兼容性差）防止重复触发：禁用浏览器默认滚动和表单行为
keydown 监听器中加 event.prevent 是必要操作
Default()'ArrowUp'、'ArrowDown'、'ArrowLeft'、'ArrowRight'、' '（空格）、'PageUp'、'PageDown'
无法用空格激活，若需兼顾可加条件判断（如只在 canvas 获得焦点时阻止）Canvas 动画中键盘响应延迟高？检查 requestAnimationFrame 同步逻辑
keydown 里立刻修改位置，但下一帧还没渲染，用户感知就是延迟。
键盘控制不是加个事件监听就完事；关键在于状态管理节奏、默认行为拦截粒度、以及和渲染循环的严格解耦。最容易忽略的是：requestAnimationFrame 回调里统一计算和绘制ctx.fillRect() 或修改 DOM —— 这会强制同步重绘，破坏帧率稳定性keys['ArrowRight'] 值，确认它与按键动作实时一致，排除事件丢失可能document 绑定漏掉、preventDefault 忘加、还有把键处理逻辑错放到事件回调而非动画帧内。
