<button type="button" onclick="closeDialog()">取消</button> <button type="submit">保存</button>
确认弹窗里点取消,页面刷新了一下,表单内容被清空。查网络记录,取消按钮触发的是一次 POST,和提交按钮打的是同一个地址。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:button 元素在表单内不写 type 时默认就是 submit。取消按钮只绑了 click,没有阻止默认行为,浏览器把它当成提交按钮处理。
「button 默认提交」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。权限不要一口气开到最大,先加到够用再往上试,范围小才好收。
把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
处理上按这个顺序:所有非提交用途的 button 显式写上 type=button;关闭弹窗的逻辑里补一次 preventDefault,防止别处漏写;提交按钮保留 type=submit,避免两套逻辑混用。
确认没问题再收工,点取消只关闭弹窗,网络面板没有新增请求,已填内容保持不变。
