可以实现，但只在内联事件处理器场景下有效，而且必须明确写出 return false；在现代前端开发中，更推荐使用 addEventListener 配合 event.preventDefault() 来阻止表单默认提交，语义更直观，也支持多个事件监听器并存，兼容性表现也更稳定。

onsubmit="return false" 还管用吗？

依然管用，但仅适用于内联事件处理器，并且必须显式写成 return false。在现代 Web 开发里，这种写法已经不算推荐方案，因为它可能覆盖其他已经绑定的事件监听器，后期维护和扩展也不够方便。

这类问题在实际开发中非常常见：很多人会把 onsubmit="return false;" 误写成 onsubmit="false"，看起来只是少写了一个 return，但结果完全不同——没有返回值，浏览器就不会拦截表单提交。还有一种高频错误也很容易忽视：函数内部虽然写了 return false，但调用时没有把这个返回结果返回出去，例如写成 onsubmit="handleSubmit()"。这样函数返回值实际上被忽略，表单仍然会照常提交。

• onsubmit="return false" 属于最直接的提交拦截方式，适合快速演示、简单页面或单一监听场景
• 如果同时使用了 addEventListener('submit', ...)，onsubmit 可能出现冲突、覆盖或行为不一致的问题，优先级也不够直观
• IE8 及更早版本主要支持内联 onsubmit，不过现代网站和项目通常已经无需考虑这类旧版兼容

addEventListener 中怎么正确阻止默认行为？

这是现在最标准、最推荐的做法：给表单绑定 submit 事件后，在回调函数中执行 event.preventDefault()。这种方式不依赖返回值，代码语义明确，同时支持多个监听器协同工作，非常适合规范化开发。

有几个特别容易出错的细节，最好提前注意：event.returnValue = false 是早期 IE 的旧式写法，现在基本已经废弃；另外，如果没有正确传入 event 参数，或者把 preventDefault 方法名写错，也会导致阻止默认提交失败；还有一种场景很常见——把 preventDefault() 放进异步逻辑中，比如 fetch 回调之后才执行，但提交事件触发时没有立即拦截，这时页面刷新或跳转通常早已发生。

• 必须接收事件对象：form.addEventListener('submit', function(e) { e.preventDefault(); })
• 使用箭头函数时要留意 this 指向问题，不过 e.preventDefault() 本身并不依赖 this
• 如果需要按条件阻止提交（例如表单校验未通过），直接写 if (!valid) e.preventDefault() 即可，无需额外写 else

为什么不能只靠 type="button" 替代？

有些人会把提交按钮改成 ，想用这种方式“避免表单提交”。看起来简单，但本质上是绕开了 HTML 表单原本的语义和可访问性机制。用户按下 Enter 键时，依旧可能触发表单提交（除非整个 form 的提交行为被彻底处理掉），而且屏幕阅读器等辅助工具也可能无法准确理解这个按钮的真实用途。

这两种方式的应用场景其实不同：按钮类型控制的是“是否发起提交动作”，而 preventDefault 控制的是“提交动作发生后，是否继续执行浏览器默认的刷新、跳转等行为”。前者是在源头控制是否触发，后者是在事件触发后拦截默认流程，因此两者不能简单互相替代。

• type="button" 更适合纯 JavaScript 功能按钮，不参与表单提交流程
• type="submit" + preventDefault 才是更完整的表单提交控制方案：既保留语义，也支持键盘提交，并方便后续扩展如 loading、校验、禁用状态等逻辑
• 如果混合使用（例如同一个表单中同时存在 type="submit" 和 type="button"），一定要明确哪个按钮才是真正负责提交的入口

React/Vue 等框架里还要手动 preventDefault 吗？

要，而且通常不能省略。无论是 React 的 onSubmit，还是其他框架的表单提交事件，本质上仍然是对原生事件的封装，并不会默认帮你阻止浏览器的提交行为。也就是说，你写了 onSubmit={handleSubmit}，框架只是帮你完成事件绑定，真正阻止默认提交仍然需要在 handleSubmit 内部主动执行 e.preventDefault()。

常见错误包括：在 Vue 的 @submit="handleSubmit" 中忘记调用 e.preventDefault()，或者在 React 中对参数解构时漏掉事件对象，例如 onSubmit={({ target }) => { /* 忘了 e */ }}，最终就会导致页面刷新或跳转。

• React：事件处理函数必须接收 event 参数，通常建议第一行就写 e.preventDefault()
• Vue：模板中可以使用 @submit.prevent 修饰符，它等价于自动执行 preventDefault；但在逻辑较复杂时，仍建议在方法内部显式控制
• Next.js / Remix 等 SSR 框架中，客户端 hydration 完成后的表单提交规则也与原生浏览器行为一致

另外，真正容易被忽略的还有事件冒泡和事件委托场景：如果表单是通过脚本动态插入页面的，直接用 addEventListener 绑定在 form 上，可能会因为绑定时机不对而失效，此时应考虑事件委托，或者确保元素挂载完成后再绑定。再比如某些 UI 组件库（如 Ant Design）的 Form 组件内部已经封装了 preventDefault，这种情况下再手动调用虽然不会出错，但通常属于重复处理。