阻止页面刷新的关键是在 form 的 submit 事件中调用 preventdefault()，而非在 button 的 click 事件中；submit 事件会由点击 submit 按钮或回车自动触发，且是唯一具有默认刷新行为的事件。
事件冒泡本身不会导致页面刷新，真正触发刷新的是表单的 submit 事件默认行为。所以问题核心不是“用冒泡阻止刷新”，而是在 submit 事件中正确调用 preventDefault()来取消默认提交——冒泡和刷新是两回事，混用会误导排查方向。
为什么监听 click 无法可靠阻止刷新
很多开发者给提交按钮绑 click 事件并调用 preventDefault()，但依然刷新，原因很明确：
- button 元素的 click 事件本身没有“刷新页面”的默认行为，preventDefault() 对它无效
- 如果 button 在 form 内且未设 type，浏览器自动视为 type="submit"，点击会触发父级 form 的 submit 事件，这才是刷新源头
- 只拦 click，没拦 submit，刷新照常发生
正确做法：绑定 submit 事件并 preventDefault()
必须作用于 form 元素的 submit 事件，这是唯一具有“提交+刷新”默认行为的事件点：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- HTML 中确保 form 结构完整，button 明确写
type="submit" - JS 中用
form.addEventListener('submit', handler)，不是 button.click - 在 handler 第一行就调用
e.preventDefault()，不能延迟或放在异步回调里
顺便处理回车提交这类隐藏触发源
用户在输入框按回车也会触发表单 submit，默认行为同样会导致刷新：
- 无需额外监听 keydown 或 enter；只要 form 结构正确，回车天然触发 submit 事件
- 上述 submit 监听器已一并覆盖回车场景，无需重复写逻辑
- 若需禁用回车提交，可给 input 加
onkeydown="if(event.key==='Enter') event.preventDefault();"，但通常不推荐，破坏用户习惯
什么时候才需要 stopPropagation()
仅当表单嵌套在其他有 click 监听的容器中，且你不希望 submit 触发父级 click 处理时才用：
- 比如 form 包在 div 里，div 有遮罩关闭逻辑，你点 submit 不想顺带关遮罩
- 此时在 submit 处理器里加
e.stopPropagation()，但不能替代 preventDefault() - 绝大多数表单场景不需要它，加了反而增加维护负担
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
