根本原因是事件监听未绑定到form元素的submit事件上；必须用addeventlistener监听form的submit事件并同步调用event.preventdefault()，且提交按钮应设为type="button"以防回车触发表单。
表单提交时页面跳转了，preventDefault 没生效？
根本原因通常是事件监听没绑对——比如用了 onclick 内联属性，或者监听了 click 而不是 submit。表单的默认行为（刷新/跳转）只在 submit 事件上触发，click 事件本身不带这个默认行为。
- 必须监听
form元素的submit事件，不是按钮的click - 内联写法如
onsubmit="return false"能拦住，但无法做异步逻辑，也不推荐 -
event.preventDefault()必须在事件处理函数中同步调用，不能包在setTimeout或 Promise 回调里 - 如果表单是动态插入的，得用事件委托，监听父容器的
submit并检查event.target
用 addEventListener 绑定 submit 事件的正确姿势
这是最可控、最不容易出错的方式。注意三点：事件源是 form 元素、用 event.preventDefault()、别忘了加 type="button" 防止按钮意外触发表单提交。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 获取表单：
const form = document.querySelector('form'); - 绑定事件：
form.addEventListener('submit', handleFormSubmit); - 处理函数第一行必须是：
event.preventDefault(); - 提交按钮建议写成：
<button type="button">提交</button>，避免回车自动触发表单
function handleFormSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
fetch('/api/login', { method: 'POST', body: data });
}
return false 和 preventDefault() 能混用吗？
能，但没必要，而且容易误判效果。return false 在原生 DOM 事件中等于同时调用 preventDefault() 和 stopPropagation()，后者常被忽略，导致事件委托失效或父级监听收不到事件。
- 仅阻止默认行为，就只用
event.preventDefault() - 如果还手动调用了
event.stopPropagation()，要确认是否真需要阻断冒泡 - 在 jQuery 时代流行的
return false习惯，迁移到原生 JS 后要特别注意语义差异 - 箭头函数里不能用
return false来替代preventDefault()，因为 this 不指向 event
为什么加了 preventDefault 还是跳转了？检查这三处
常见于多层嵌套表单、SPA 路由、或框架（如 Vue/React）未正确处理事件代理的场景。
- 表单被包裹在另一个
form里，事件冒泡到了外层表单，外层没拦截 - 使用了前端路由（如
history.pushState），但没禁用表单默认跳转，导致路由还没推就刷新了 - 框架中用了
@submit.prevent（Vue）或onSubmit={e => { e.preventDefault(); ... }}（React），但模板里漏写了.prevent或括号位置错了
submit，但事件监听挂错了元素，或者表单压根没写 action 属性导致行为不一致。这种细节不打日志很难一眼看出来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
