必须监听form的submit事件并同步调用event.preventDefault()，因为只有submit事件触发默认刷新/跳转行为，click事件无法捕获回车等提交方式；button需显式设type="button"或type="submit"并确保preventDefault()首行执行。
必须监听元素的事件并调用，否则页面一定会刷新或跳转——哪怕你写了、绑了按钮、甚至用了内联写法，都可能拦不住。
为什么只监听按钮 click 不行
表单的默认提交行为（刷新/跳转）只在
事件上触发，
事件本身不带这个默认行为。用户点
按钮、按回车、甚至用 JS 调用
，最终都会派发
事件，但不会派发按钮的
（尤其回车时根本不会触发按钮 click）。
常见错误现象：
输入后按回车，页面刷新，但控制台没报错、JS 也没执行
按钮绑了
并
，但回车仍提交
多个提交入口（按钮 + 回车 + JS 触发），只拦了一个，漏掉其他
正确做法是统一收口到
，一劳永逸。
立即学习
“
前端免费学习笔记（深入）
”；
button 的 type 属性必须显式声明
很多“拦不住”问题其实和事件监听无关，而是按钮自己就在偷偷提交。
在
内默认就是
；只要它存在，回车或点击就会触发
事件——哪怕你 JS 已绑好监听，也可能因执行时机晚、异常抛出、或 DOM 未就绪而失效。
稳妥方案：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
纯前端交互（如验证、主题切换、搜索）：用
，彻底切断提交源头
需要保留语义（如登录表单）：仍用
，但确保
监听器第一行就是
绝对不要省略
属性，尤其动态插入按钮时
preventDefault() 必须同步执行且位置靠前
不是“设个开关”，它是运行时指令，必须在事件处理函数中**同步、无条件、第一时间**调用。
容易踩的坑：
放在异步回调里：
或
—— 无效，提交早已发生
被条件逻辑挡住：比如先校验表单，失败才
，但成功路径里忘了
监听器绑定太早：DOM 还没加载完就执行
，绑定失败，后续全白搭
推荐写法：
动态插入的表单要用事件委托
如果表单是通过 AJAX 加载、Vue/React 渲染、或 JS 动态创建的，
可能取不到元素，或者监听器只绑了一次旧节点。
这时不能依赖直接绑定，得用事件委托：
监听父容器（如
或固定 ID 的 wrapper）的
事件
在 handler 里检查
是否为你的表单（比如
）
再执行
和后续逻辑
注意：委托时别用
，必须是
，否则回车依然逃逸。
最常被忽略的一点：
拦的是“浏览器默认动作”，不是“JS 逻辑”。如果你的表单有
属性，浏览器原生校验失败时会阻止提交，但成功后仍会走默认流程——所以拦的位置、时机、目标元素，一个都不能错。
formsubmitevent.preventDefault()fetchclickreturn falsesubmitclicktype="submit"form.submit()submitclickonclickreturn falseform.addEventListener('submit', ...)formtype="submit"submittype="submit"submitevent.preventDefault()typeevent.preventDefault()setTimeout(() => event.preventDefault(), 0)fetch().then(() => event.preventDefault())returnpreventDefault()document.querySelector('form').addEventListener(...)document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault(); // 第一行就写这句
const data = new FormData(e.target);
fetch('/api/login', { method: 'POST', body: data });
});
}
});
querySelectordocumentsubmite.targete.target.matches('#my-form')e.preventDefault()clicksubmitpreventDefault()required