按钮在form内点击刷新是因为默认type为submit，必须显式声明type="button"；reset仅还原初始html值，对js修改无效；防重复提交需立即禁用按钮；preventdefault须在form.submit事件中同步调用。
button在form里点一下就刷新？一定是type没写对
浏览器对 <button></button> 的默认 type 是 submit，只要它在 <form></form> 标签内，点击或回车都会触发表单提交——哪怕你只写了 onclick 逻辑，页面照样重载。
常见错误现象：
- 点了“取消”按钮，页面却刷新了
- 弹窗里的表单点提交没反应，实际是跳转走了
- 输入框聚焦时按回车，触发了第一个按钮（哪怕是“重置”）
正确做法只有两个字：显式声明。
- 所有非提交用途的按钮，必须写
type="button" -
<button type="submit"></button>只留给真正要提交表单的按钮 - 动态创建的按钮（如 JS 用
document.createElement('button')），记得立刻设button.type = 'button'
reset按钮为什么清不掉JS改过的值？
<button type="reset"></button> 不是“清空”，而是“还原初始 HTML 属性值”。它只看元素初始化时写的 value 属性，对运行时通过 input.value = 'xxx'、useState 或 v-model 改变的状态完全无感。
使用场景：
-
<input value="张三">→ reset 后变回 “张三” -
<input>（没写value）→ reset 后为空字符串 -
el.value = "李四"后再 reset → 值仍是 “李四”，毫无变化
React/Vue 场景下，type="reset" 基本等于废功能。真要清空，得走状态重置逻辑：
- 手动赋值：
input.value = "" - 调用表单级状态重置函数（如
form.reset()后再同步更新受控组件） - 避免混用：不要一边用
v-model，一边指望type="reset"生效
怎么防止按钮被连点重复提交？
前端防重复最可靠的方式，是点击后立刻禁用按钮。这不是视觉反馈优化，而是阻断用户二次操作的唯一有效手段。
关键细节：
- 必须在事件处理函数第一行执行
button.disabled = true，否则异步请求还没发出去，用户就可能再点一次 - 别用
display: none或移除onclick—— 这些都能被绕过，disabled是浏览器原生拦截 - 如果用了
fetch()，记得在finally块里恢复按钮状态（仅限失败/取消；成功后通常跳转或清空，不用恢复） - 注意
form.reset()会把disabled状态也重置掉，导致防重复失效 —— 所以要么不用原生 reset，要么监听reset事件手动再设一次disabled
阻止默认行为为什么写了preventDefault还抖？
页面“抖动”本质是浏览器执行了默认导航行为：滚回顶部、刷新、跳锚点。常见原因不是 CSS，而是事件拦截位置错了。
最容易踩的坑：
- 只监听
button.click并调event.preventDefault()→ 拦不住回车提交（回车不触发 click） -
preventDefault()写在fetch().then()里 → 异步执行，早于默认行为，无效 - 用
href="#"做伪按钮 →preventDefault()对锚点滚动无效，页面照常滚顶
根本解法只有两个：
- 对所有非提交按钮，一律用
type="button"，从语义上切断表单关联 - 若需统一拦截提交，监听
form.submit事件，并在回调函数第一行同步调e.preventDefault()
动态插入的表单，要用事件委托：document.addEventListener('submit', e => { if (e.target.matches('form[data-ajax]')) e.preventDefault(); })。别忘了脚本要在 DOM 加载完成后执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
