必须监听form的submit事件并调用e.preventDefault()才能阻止表单默认提交；点击submit按钮、按回车均可触发，但form.submit()方法例外，不触发submit事件。
在 JavaScript 中，用 preventDefault() 阻止表单提交时的默认跳转或页面刷新，关键是在事件处理函数中调用它，并确保绑定的是表单的 submit 事件（不是 click）。
必须监听 form 的 submit 事件
表单提交的默认行为（如页面刷新、跳转到 action 地址）由 submit 事件触发，不是按钮的 click。所以要阻止它，得给 <form> 元素绑定 submit 事件：
- ✅ 正确：
form.addEventListener('submit', handler) - ❌ 错误：
button.addEventListener('click', handler)—— 这无法阻止表单默认提交行为
在事件处理函数里调用 preventDefault()
preventDefault() 必须在事件对象上调用，且通常放在函数开头，避免因异步或条件提前退出导致失效：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault(); // 第一步：立刻阻止默认提交
// 后续可执行 AJAX 提交、表单验证等逻辑
console.log('表单已拦截，未刷新');
});
注意表单触发提交的几种方式
用户可能通过多种方式触发表单提交，所有方式都会触发 submit 事件，preventDefault() 均有效：
立即学习“Java免费学习笔记（深入）”；
- 点击
<input type="submit">或<button type="submit"> - 按下回车键（焦点在可提交的表单控件内，如文本框）
- 调用
form.submit()是**例外**：它不会触发submit事件，因此也无法被preventDefault()拦截
常见误区与建议
容易忽略但影响功能的细节：
- 确保 JS 代码在 DOM 加载完成后执行（比如放在
</body>前，或用DOMContentLoaded） - 如果用了框架（如 Vue/React），优先使用其内置表单绑定机制，而非手动加事件
- 阻止默认行为后，记得手动处理后续逻辑（如 fetch 提交、显示提示），否则用户会感觉“点了没反应”
