本文详解如何通过正确绑定 submit 事件并调用 event.preventDefault() 来阻止 HTML 表单默认的页面跳转或刷新行为，特别适用于购物车添加、无刷新提交等场景。
本文详解如何通过正确绑定 `submit` 事件并调用 `event.preventdefault()` 来阻止 html 表单默认的页面跳转或刷新行为，特别适用于购物车添加、无刷新提交等场景。
在 Web 开发中，使用 <form> 提交数据时，浏览器默认会触发完整页面提交（full-page submission）——即向服务器发送请求并重新加载当前页面。这会导致 JavaScript 中的 console.log()、表单验证逻辑、异步操作（如 AJAX 或 Fetch）无法正常执行，甚至直接中断调试流程。
你遇到的问题根源在于：错误地将 submit 事件监听器绑定到了按钮（#checkout-btn）上。而 <button type="submit"> 本身并不会触发 submit 事件；它只是“触发”其所属 <form> 的提交行为。因此，checkout.addEventListener("submit", ...) 实际上从未被调用，event.preventDefault() 自然失效，页面仍按默认行为刷新。
✅ 正确做法是：将 submit 事件监听器绑定到 <form> 元素本身，并在回调中调用 event.preventDefault()：
const form = document.getElementById('form-data');
form.addEventListener('submit', (event) => {
event.preventDefault(); // ✅ 关键：阻止默认提交行为
console.log('表单已拦截提交，可执行验证、AJAX 或购物车逻辑');
// checkoutItems(); // 此处可安全调用你的业务函数
});⚠️ 注意事项：
- 不要监听按钮的 click 事件来替代 submit —— 虽然 click 可捕获点击，但无法覆盖表单原生提交机制（例如回车提交），且易遗漏交互路径；
- 确保 event.preventDefault() 在事件处理函数最开始执行，避免因逻辑异常导致未调用；
- 若后续需真正提交数据（如通过 fetch() 发送到后端），请在此处手动发起异步请求，而非依赖表单默认行为；
- 表单内所有 type="submit" 的按钮（包括 <input type="submit"> 和 <button type="submit">）都会触发该 submit 事件，无需为每个按钮单独绑定。
补充建议：为提升用户体验，可在 preventDefault() 后增加简易状态反馈，例如禁用按钮防止重复提交：
form.addEventListener('submit', (event) => {
event.preventDefault();
const submitBtn = document.getElementById('checkout-btn');
submitBtn.disabled = true;
submitBtn.textContent = 'Processing...';
// 执行你的购物车逻辑（如收集商品数量、校验输入等）
if (validateForm()) {
addToCart(); // 示例业务函数
} else {
submitBtn.disabled = false;
submitBtn.textContent = 'Checkout';
}
});总结：表单提交防刷新的核心在于事件委托对象必须是 <form>，而非其内部按钮；event.preventDefault() 是必要且充分的干预手段。掌握这一原则，即可稳定实现无刷新表单交互，为构建现代单页应用（SPA）打下坚实基础。
