在单页应用中，表单默认提交会触发完整页面刷新或导航，即使已绑定 JavaScript 处理函数并返回 false，仍可能因事件未被显式阻止而跳转；正确做法是调用 event.preventDefault()。
在单页应用中，表单默认提交会触发完整页面刷新或导航，即使已绑定 javascript 处理函数并返回 `false`，仍可能因事件未被显式阻止而跳转；正确做法是调用 `event.preventdefault()`。
表单提交时浏览器的默认行为是：构造一个 HTTP POST 请求，将表单数据按 application/x-www-form-urlencoded 格式发送，并跳转至响应页面（或当前 URL）。即使你为 onsubmit 绑定了 send_mail 函数并末尾写了 return false;，该返回值仅对内联事件处理器（如 <form onsubmit="return send_mail()">）生效；而你使用的是 document.querySelector('#compose-form').onsubmit = send_mail; —— 这种赋值方式下，send_mail 的返回值不会自动传递给事件系统，因此 return false 实际上无法阻止默认行为。
✅ 正确且推荐的解决方案是：在事件处理函数开头显式调用 event.preventDefault()：
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
function send_mail(event) {
event.preventDefault(); // ✅ 关键：阻止表单默认提交行为
const recipients = document.querySelector('#compose-recipients').value;
const subject = document.querySelector('#compose-subject').value;
const body = document.querySelector('#compose-body').value;
fetch('/emails', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
recipients,
subject,
body
})
})
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.then(result => {
console.log('Email sent:', result);
load_mailbox('sent');
})
.catch(error => {
console.error('Failed to send email:', error);
alert('Failed to send email. Please try again.');
});
}⚠️ 注意事项：
- event.preventDefault() 必须在函数首行或至少在任何异步操作之前调用，否则可能因执行延迟而失效；
- 建议同时添加 headers: {'Content-Type': 'application/json'}，避免后端因缺少头信息拒绝请求；
- 不再依赖 return false 控制默认行为，它在此上下文中无效；
- 若后续需兼容旧版 IE，可补充 event.returnValue = false（但现代项目通常无需）；
- 推荐改用 addEventListener 替代直接赋值 onsubmit，语义更清晰、支持多监听器：
document.querySelector('#compose-form').addEventListener('submit', send_mail);总结：表单路由跳转的根本原因不是 JS 逻辑错误，而是未主动拦截浏览器默认提交行为。event.preventDefault() 是标准、可靠、跨浏览器的解决方式，应作为单页应用中表单提交处理的必备步骤。
