使用fetch与点击监听器的迷你问答游戏递归跳转异常问题

问题根源 #

每次调用theGame函数时都会给optionBox添加新的点击监听器，导致监听器叠加，触发一次点击就会执行多次回调，进而让level自动递增、跳过题目。

解决方法 #

• 提前移除旧监听器，再添加新的
  把点击回调抽成独立函数，每次调用theGame时先移除旧监听器，再绑定新的，避免叠加：

  // 独立的点击处理函数
  function handleOptionSelect(e) {
    // 这里写你的答题逻辑：判断答案、计算得分等
    // ...
    // 处理完后进入下一题
    theGame(currentLevel + 1);
  }
  
  function theGame(level) {
    // 先移除之前的监听器
    optionBox.removeEventListener('click', handleOptionSelect);
    // 再绑定新的监听器
    optionBox.addEventListener('click', handleOptionSelect);
    // 加载当前level的题目、选项等渲染逻辑
    // ...
  }
  

• 用事件委托，只绑定一次监听器
  直接在选项的父容器上绑定一次事件委托，后续只更新题目内容，不用重复绑定监听器：

  // 页面初始化时只绑定一次
  document.querySelector('.options-wrapper').addEventListener('click', function(e) {
    // 确认点击的是选项元素
    if (e.target.matches('.option-item')) {
      // 执行答题逻辑，获取当前level、判断答案
      // ...
      // 更新level后渲染新题目
      theGame(nextLevel);
    }
  });
  
  function theGame(level) {
    // 只负责渲染当前level的题目和选项，不用管监听器绑定
    // ...
  }
  

• 使用once参数让监听器自动失效
  添加监听器时设置once: true，这样监听器触发一次后会自动移除，不会叠加：

  function theGame(level) {
    optionBox.addEventListener('click', function(e) {
      // 答题逻辑代码
      // ...
      // 进入下一题
      theGame(level + 1);
    }, { once: true }); // 触发一次后自动移除监听器
    // 渲染当前题目逻辑
    // ...
  }
  

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