如何判断canvas是否处于聚焦状态？canvas能否获得焦点？

核心问题说明 #

canvas 默认不属于可聚焦元素，无法直接通过document.activeElement判断聚焦状态，需要给canvas标签添加tabindex="0"属性后，才支持获得/失去焦点的状态检测。

你之前的方案失效原因：

• document.activeElement!==canvas不生效：未加tabindex时canvas永远无法获得焦点，该判断永远为true，所以游戏永远不会响应键盘输入。
• document.activeElement==notcanvas不生效：聚焦输入项时，activeElement是输入项本身而非父级div，该判断永远为false，所以游戏永远会响应键盘输入。

可选解决方案 #

方案1：仅当canvas聚焦时响应游戏按键（逻辑最清晰，推荐）

1. 修改canvas标签，添加tabindex属性

<canvas id="你的canvasID" tabindex="0"></canvas>

2. 可选：去掉canvas聚焦时的默认外边框

#你的canvasID:focus {
  outline: none;
}

3. 修改键盘事件监听逻辑

const canvas = document.getElementById('你的canvasID');
// 页面加载完成后默认给canvas聚焦，避免刚打开页面操作无响应
window.addEventListener('load', () => canvas.focus());
// 点击页面空白处时自动给canvas聚焦，优化操作体验
document.addEventListener('click', e => e.target === document.body && canvas.focus());

document.addEventListener('keydown', e => {
  // 非canvas聚焦状态直接返回，不处理游戏按键
  if (document.activeElement !== canvas) return;
  // 下面写你原有的游戏按键处理逻辑
})

方案2：仅当未聚焦输入类元素时响应游戏按键（适合点击空白处也需要操作游戏的场景）

不需要修改canvas属性，后续新增任何输入类元素都不需要调整判断：

document.addEventListener('keydown', e => {
  const focusEle = document.activeElement;
  // 聚焦在输入框、下拉框、可编辑内容元素时，不处理游戏按键
  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(focusEle.tagName) || focusEle.isContentEditable) {
    return;
  }
  // 下面写你原有的游戏按键处理逻辑
})

内容的提问来源于stack exchange，提问作者Kitty Craft0