表单提交后不跳转需阻止默认行为，用event.preventDefault()拦截submit事件，再通过fetch或XMLHttpRequest手动提交；confirm等同步弹窗适合原型阶段，但推荐用<dialog>或UI库实现可定制的异步反馈。
表单提交后不跳转，只弹出确认提示
直接阻止默认提交行为是关键。浏览器原生的 submit 事件会触发页面刷新或跳转，必须用 event.preventDefault() 拦住它，再手动处理后续逻辑。
常见错误是只加了 alert() 却没阻止提交，结果弹窗一闪而过、页面已跳走。正确做法是把弹窗逻辑放在阻止之后，并明确控制是否真正发送数据：
- 监听
form元素的submit事件，不是按钮的click - 调用
event.preventDefault()是第一行，不能漏 - 如果确认后要发请求，改用
fetch或XMLHttpRequest，别再触发表单原生提交
用 alert / confirm 做最简确认
适合内部工具或原型阶段，无需额外依赖。但注意：这些是同步阻塞式弹窗，用户关掉前 JS 完全暂停，无法自定义样式或添加输入框。
示例（仅确认是否继续提交）：
立即学习“前端免费学习笔记（深入）”；
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
if (confirm('确定要提交吗？')) {
this.submit(); // 注意：这是原生 submit 方法，非事件
}
});
⚠️ 这里 this.submit() 是表单对象的方法，和触发事件的 submit 事件名相同但含义不同——容易混淆，建议改用 fetch 替代。
用 fetch 提交 + 自定义弹窗（推荐）
现代方案的核心是「分离行为」：表单只负责收集数据，JS 负责校验、提交、反馈。这样能用任意 UI 库（如 Bootstrap Modal、Toast）做确认，也便于加 loading 状态和错误重试。
实操要点：
- 表单
method和action属性可保留，但实际不用它们；或者直接删掉，避免误导 - 用
new FormData(form)读取所有字段，兼容文件上传 - 提交成功后，用
showModal()（若用<dialog>）或 DOM 操作显示自定义弹窗 - 失败时别只弹「提交失败」，应解析
response.json()并展示具体错误字段
注意 <dialog> 的兼容性与回退方案
<dialog> 是最轻量的原生模态框，但 Safari 15.4 之前不支持，iOS 全系需检查。若需兼容老浏览器，得准备 fallback —— 比如用 position: fixed + backdrop-filter 手写一层遮罩。
最小可用 <dialog> 写法：
<dialog id="confirmDialog">
<p>提交成功！</p>
<button onclick="this.closest('dialog').close()">确定</button>
</dialog>
调用时：document.getElementById('confirmDialog').showModal()。别忘了给 <dialog> 加 open 属性调试用，但正式代码里必须用 JS 控制显隐——否则 SEO 和无障碍会出问题。
真实项目里，表单提交后的反馈不只是“成功/失败”两个状态，往往还要处理重复提交、网络中断、服务端校验失败等分支。弹窗只是最后一步，前面的数据收集、序列化、错误映射才是容易被忽略的复杂点。
