取消按钮必须设为并调用event.preventdefault()，避免误提交；禁用或未拦截的默认行为；form.reset()仅恢复html初始值，不处理js修改或校验提示。
点击“取消”按钮时阻止表单默认提交行为
表单的 submit 事件默认会触发表单提交（跳转或刷新），哪怕你只是想点个“取消”按钮。关键不是“取消提交”，而是**不让浏览器执行默认动作**——这得靠 event.preventDefault() 在合适时机拦截。
常见错误是把取消逻辑写在普通 button 的 click 事件里，却忘了它和表单提交无关；更糟的是把取消按钮写成 <button type="submit"></button>，结果一点就真提交了。
- 取消按钮必须设为
<button type="button"></button>，否则浏览器会把它当提交触发器 - 如果用
<a href="#"></a>模拟取消按钮，记得加event.preventDefault()，否则页面会跳到顶部 - 不要在表单的
submit事件里靠条件判断“是不是取消按钮触发的”——不可靠，DOM 事件流里 submit 事件不携带按钮信息
使用 reset() 方法清空已填内容（谨慎）
form.reset() 会把所有控件恢复到初始值（即 HTML 中写的 value、checked、selected 等状态），但它不是“取消提交”的等价操作，而是一个独立的 DOM 方法。
容易踩的坑：如果表单初始值本身就是用户填过的（比如通过 JS 动态设过 input.value），reset() 不会还原那些 JS 修改，只认 HTML 初始快照。另外，reset() 不会清除通过 setCustomValidity() 设置的校验错误提示。
- 仅在明确需要清空并回到初始状态时调用
form.reset() - 若需保留部分字段（如隐藏域、token），别依赖
reset()，改用手动赋值：input.value = ""、textarea.value = ""、select.selectedIndex = 0 - 调用前确保
form元素已获取到正确引用，避免undefined.reset is not a function
关闭弹窗或返回上一页时的安全处理
很多“取消”操作实际发生在模态框（Modal）或 SPA 页面中，此时用户点击取消，真正要防止的是：表单数据意外提交 + 页面状态错乱。
典型场景是 Vue/React 组件内嵌表单，或用 dialog 元素做的弹窗。这时候重点不是阻止 submit，而是控制组件生命周期或路由跳转。
- 在关闭前检查是否有未保存修改，可监听
input、change事件标记isDirty = true，取消时弹确认 - SPA 中用路由导航（如
history.back()或router.push()）前，确保没正在调用fetch提交 - 如果用了
<dialog></dialog>，关闭时调用dialog.close()即可，它本身不触发任何表单行为
后端接口已接收请求？前端取消无效
前端的“取消”只能拦住浏览器发请求的动作，一旦 fetch 或 XMLHttpRequest 已发出且后端开始处理，前端再怎么 abort() 也改变不了后端状态。这是常被忽略的边界。
例如用户点了提交，又立刻点取消，但请求已在途中——这时 AbortController 能让前端不再等待响应，但后端可能已完成插入或扣款。
- 对关键操作（如支付、删除），后端应支持幂等性或提供“撤回接口”，不能只靠前端取消
- 提交按钮点击后立即置为
disabled，防止重复提交，比事后取消更有效 -
fetch中用signal配合AbortController是标准做法，但记住：它只终止客户端等待，不中断服务端执行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
