Brave浏览器中event.preventDefault()无法阻止页面刷新问题排查

问题原因及解决方案 #

1. 事件绑定时机错误（最常见） #

如果你的JS代码在DOM完全加载前就执行了，document.getElementById("addBooksForm")会返回null，导致事件监听器根本没绑定到表单上。此时点击提交按钮会触发浏览器默认的表单提交行为，页面自然会刷新，而你的event.preventDefault()根本没机会执行。

解决方法：
把JS代码放在DOM加载完成后执行，两种可行方式：

• 将<script>标签放在HTML的</body>闭合标签前
• 用DOMContentLoaded事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("addBooksForm").addEventListener("submit", getBooksData);
  // 其他DOM相关代码也放在这个回调里
});

2. 表单存在内联onsubmit属性 #

如果你的表单HTML里写了onsubmit属性（比如<form id="addBooksForm" onsubmit="submitForm()">），即使你通过addEventListener绑定了事件，内联的onsubmit代码可能会优先执行，且如果内联代码没有返回false或调用event.preventDefault()，依然会触发默认刷新行为。

解决方法：
移除表单的内联onsubmit属性，统一用addEventListener处理提交逻辑。

3. 事件对象未正确获取（罕见但可能） #

极少数情况下，事件参数event可能未被正确传递到getBooksData函数中，导致event.preventDefault()报错（比如event是undefined），从而跳过阻止默认行为的逻辑。

解决方法：
显式确保获取事件对象，修改函数定义：

function getBooksData(event) {
  event = event || window.event; // 兼容旧浏览器
  event.preventDefault();
  // 后续收集数据的代码...
}

额外优化建议 #

你的代码第一行存在小问题：addEventListener返回的是undefined，所以form变量实际上是undefined，如果之后需要操作表单元素（比如重置表单）会出错，建议分开写：

const form = document.getElementById("addBooksForm");
form.addEventListener("submit", getBooksData);

另外，addBooks是异步函数，getBooksData里直接调用addBooks()后立刻执行fetchBooks()，可能会因为添加操作还没完成就拉取数据，导致新添加的图书不会立刻显示，建议改成异步函数：

async function getBooksData(event){
    event.preventDefault();
    
    // 收集表单数据...
    
    await addBooks(bookDetails); // 等待添加完成再拉取数据
    fetchBooks();
}

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