按钮点击后页面“抖动”是因浏览器执行默认导航行为所致，常见于form内button未设type属性、a标签用href="#"、或submit事件中preventdefault()未生效；根本解决法是显式设button type="button"、监听form submit事件并首行调用e.preventdefault()、避免href="#"。
为什么按钮点击后页面会“抖动”
所谓“抖动”，其实是页面意外刷新或跳转导致的视觉重绘，常见于：button在form内未声明type、a标签用href="#"、或submit事件里preventDefault()没生效。根本不是 CSS 动画或滚动问题，而是浏览器执行了默认导航行为——比如滚回顶部、重新加载当前页、或跳到锚点。
form里的button必须显式设type="button"
这是最省心、最防错的做法。不写type属性的button在form中默认就是type="submit"，哪怕你只绑了click事件，用户按回车也会触发提交。
-
button没写type→ 浏览器当它是提交按钮 → 回车/点击都触发submit事件 → 页面刷新 - 写了
type="button"→ 彻底切断表单语义 → 点击只触发click，不会派发submit - 动态插入的按钮更要小心：JS 创建
document.createElement('button')后，务必手动设置button.type = 'button'
必须监听form的submit事件，而不是button的click
想拦住所有提交入口（点击按钮、按回车、JS调用form.submit()），唯一可靠方式是监听form元素的submit事件，并在回调第一行同步调用e.preventDefault()。
- 监听
button.click拦不住回车 —— 回车根本不会触发按钮的click -
e.preventDefault()必须出现在函数开头，不能包在fetch().then()或setTimeout里 - 动态生成的表单要用事件委托：
document.addEventListener('submit', e => { if (e.target.matches('form[data-ajax]')) e.preventDefault(); })
href="#"会导致页面滚回顶部，preventDefault()也拦不住
href="#"触发的是锚点定位（scroll to top），不是导航事件，e.preventDefault()对它无效。这不是 bug，是浏览器规范行为。
- 别用
href="#"+preventDefault()组合，徒劳且误导 - 真正安全的替代方案只有两个：
href="javascript:void(0)"或直接移除href属性，再用 CSS 补cursor: pointer和下划线 - 如果必须保留语义化链接（比如无障碍需求），改用
href="#!"或带唯一 ID 的锚点（如href="#noop-123"），并确保该 ID 在 DOM 中不存在
最容易被忽略的点：事件绑定时机。DOM 没 ready 就去查document.getElementById('myForm')，结果addEventListener根本没挂上——页面照样抖。确保脚本在DOMContentLoaded后执行，或把 script 放在 body 底部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
