如何在任务完成后禁用board元素的click事件监听器

嘿，这个问题其实很常见——要移除事件监听器的核心关键是不能用匿名函数，因为removeEventListener需要找到和绑定阶段完全一致的函数引用才能生效。下面给你一步步的实操方案：

• 第一步：把你的点击事件处理逻辑抽成一个具名函数，这样我们后续能精准引用它来绑定或移除：

  function handleBoardClick(event) {
    if (event.target.classList.contains('circle')) { 
      score++ 
      event.target.remove() 
      createRandomCircle() 
    } else if (!event.target.classList.contains('circle')) { 
      fault++ 
    }
  }
  

• 第二步：在需要启用监听器的阶段（比如游戏开始时），绑定这个具名函数：

  // 启用监听器
  board.addEventListener('click', handleBoardClick);
  

• 第三步：当任务完成需要禁用时，用同一个函数引用移除监听器即可：

  // 禁用监听器（比如游戏结束、任务完成时调用）
  board.removeEventListener('click', handleBoardClick);
  

额外小提示：避免重复绑定/移除 #

如果担心多次调用启用/禁用函数导致的重复绑定问题，可以加个状态变量来跟踪监听器的激活状态：

let isBoardListenerActive = false;

// 封装启用函数
function enableBoardListener() {
  if (!isBoardListenerActive) {
    board.addEventListener('click', handleBoardClick);
    isBoardListenerActive = true;
  }
}

// 封装禁用函数
function disableBoardListener() {
  if (isBoardListenerActive) {
    board.removeEventListener('click', handleBoardClick);
    isBoardListenerActive = false;
  }
}

之后直接调用enableBoardListener()和disableBoardListener()就能安全控制监听器的开关啦。

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