最常见的原因是页面未获焦点或监听绑定在非可聚焦元素上；需将监听挂载到document、为canvas设tabindex="0"并调用focus()，谨慎使用preventDefault()，移动端需监听resize/focusin并禁用缩放。
为什么 keydown 监听不到按键？
最常见原因是页面没获得焦点，或者监听绑定在了非可聚焦元素上。浏览器只向当前聚焦的元素（或 document）派发键盘事件，如果游戏画布（<canvas></canvas>）默认不可聚焦，又没主动调用 focus()，事件就根本不会触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保监听挂载在
document上（而非仅canvas元素），除非你明确需要元素级捕获 - 给
canvas添加tabindex="0"属性，让它能被脚本或 Tab 键聚焦 - 初始化后立即执行
canvas.focus()，尤其在移动端或 iframe 嵌入场景下更关键 - 避免在
blur后忘记重新聚焦——比如弹出提示框、切换 tab 后需手动恢复
preventDefault() 该不该加？加在哪？
不加可能导致意外行为：空格键触发页面滚动、方向键在表单中跳转、F5 刷新等。但加错位置会阻断正常交互，比如用户想复制粘贴时按 Ctrl+C 却被拦截。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在你明确处理过的按键组合上调用
event.preventDefault()，例如：if (event.key === ' ' || event.key.startsWith('Arrow')) { event.preventDefault(); } - 不要在所有
keydown回调开头无条件调用preventDefault() - 注意：
Ctrl、Alt、Meta等修饰键单独按下时不触发key值，应结合event.ctrlKey等布尔属性判断
移动端软键盘弹出后按键失效怎么解？
这不是“按键失灵”，而是软键盘占位导致 canvas 被挤压、缩放或脱离视口，进而失去焦点；部分安卓 WebView 还会暂停非活跃区域的事件监听。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
resize和focusin事件，在软键盘收起后立刻重置canvas.focus() - 用
viewportmeta 标签禁用缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 避免将游戏逻辑依赖于
keydown的连续触发（如长按加速），改用setInterval+ 标志位模拟，因为软键盘期间keyup可能丢失
多个 canvas 或 iframe 场景下焦点容易丢
当页面含多个可交互区域（如调试面板、UI 层、游戏主画布），或嵌套了 iframe，焦点极易被其他元素劫持。Chrome 甚至会在开发者工具打开时静默移除焦点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
document.activeElement实时检查当前焦点目标，发现不是预期元素时主动canvas.focus() - 对非游戏区域（如按钮、输入框）添加
blur事件监听，blur 后立刻切回游戏画布 - iframe 内运行游戏时，必须在 iframe 内部绑定事件，并确保其
document已加载完成再聚焦
焦点管理不是一次设置就能一劳永逸的事，尤其在混合交互、动态 DOM、多端适配场景下，它往往比游戏逻辑本身更容易出 silent fail —— 表现就是“明明代码没变，按键突然不响应了”。
