Node.js+SQLite3实现游戏收藏时点击按钮页面自动刷新问题排查

• 按钮未指定type="button"
  浏览器对未显式设置类型的按钮，默认会识别为submit类型。哪怕按钮不在<form>标签内，部分浏览器仍会触发类表单提交的页面刷新行为。检查按钮标签，确保显式设置type="button"，示例：

  <button type="button" id="addBtn">添加游戏</button>
  

• event.preventDefault()放置位置错误
  如果把event.preventDefault()放在fetch的异步回调（如.then()或async/await的后续代码）里，此时事件的默认行为已经触发，无法再阻止。必须将event.preventDefault()放在事件处理函数的最开头，在任何异步操作执行前调用，示例：

  document.getElementById('addBtn').addEventListener('click', async (e) => {
    e.preventDefault(); // 放在函数最前端
    // 后续fetch请求逻辑
    const response = await fetch('/api/add-game', {
      method: 'POST',
      // ...其他请求配置
    });
  });
  

• 后端接口返回重定向响应
  如果后端在处理完INSERT/DELETE操作后，返回了3xx类的重定向状态码（如302），fetch会默认跟随重定向。若重定向目标是当前页面，就会触发页面刷新。检查后端接口的响应逻辑，确保返回2xx状态码的JSON响应，示例：

  // 后端示例（Node.js+Express）
  app.post('/api/add-game', (req, res) => {
    db.run('INSERT INTO games ...', (err) => {
      if (err) {
        return res.status(500).json({ success: false, message: err.message });
      }
      res.status(200).json({ success: true }); // 返回JSON而非重定向
    });
  });
  

• 事件监听被重复绑定
  如果页面存在动态渲染逻辑（如添加新游戏后重新渲染按钮），可能导致同一个按钮被多次绑定点击事件。若某一次绑定的处理函数未调用event.preventDefault()，就会触发页面刷新。可通过绑定前移除旧监听，或使用事件委托避免重复绑定，示例：

  // 移除旧监听再绑定
  const addBtn = document.getElementById('addBtn');
  addBtn.removeEventListener('click', handleAdd);
  addBtn.addEventListener('click', handleAdd);
  
  // 或使用事件委托（绑定到父元素）
  document.getElementById('gameList').addEventListener('click', (e) => {
    if (e.target.matches('.add-btn')) {
      e.preventDefault();
      // 执行添加逻辑
    }
  });
  

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