JavaScript游戏keydown事件移除无效问题求助

removeEventListener 无效的核心原因大多是移除的函数与绑定的不是同一个引用，或是未通过状态限制输入逻辑。以下是针对性的解决办法：

1. 替换匿名函数为具名函数 #

如果绑定事件时用了匿名函数，removeEventListener 无法匹配到对应的函数引用，自然失效。改成具名函数即可：

// 定义独立的按键处理函数
function handleKeyDown(e) {
  if (e.key === 'ArrowLeft') moveLeft();
  else if (e.key === 'ArrowRight') moveRight();
}

// 绑定事件
document.addEventListener('keydown', handleKeyDown);

// 在gameover中移除对应函数
function gameover() {
  // 游戏结束的其他逻辑（比如显示结束界面）
  document.removeEventListener('keydown', handleKeyDown);
}

2. 通过状态变量控制输入生效 #

如果后续需要重新开始游戏，不想反复绑定/移除事件，可以用全局状态变量做判断：

let isGameActive = true;

function handleKeyDown(e) {
  // 游戏未激活时直接终止逻辑
  if (!isGameActive) return;
  
  if (e.key === 'ArrowLeft') moveLeft();
  else if (e.key === 'ArrowRight') moveRight();
}

// 绑定一次事件即可
document.addEventListener('keydown', handleKeyDown);

function gameover() {
  isGameActive = false;
  // 其他结束逻辑
}

// 重新开始时恢复状态
function restartGame() {
  isGameActive = true;
  // 重置角色位置、分数等
}

3. 确认事件绑定的目标元素 #

确保移除事件的元素和绑定事件的是同一个对象，比如当初给canvas绑定的事件，不能给document移除：

const gameCanvas = document.getElementById('game-canvas');
gameCanvas.addEventListener('keydown', handleKeyDown);

function gameover() {
  gameCanvas.removeEventListener('keydown', handleKeyDown);
}

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