在单页应用中，表单默认提交会触发完整页面刷新或导航，即使已返回 `false`，仍需显式调用 `event.preventdefault()` 才能彻底阻止浏览器默认行为。
你遇到的“点击提交按钮后路由意外改变”问题，根本原因在于：仅靠 return false 并不能可靠阻止表单的默认提交行为——尤其是在使用 onsubmit 属性绑定事件时，return false 的作用受限于事件绑定方式和执行上下文，且不具备语义明确性。
正确的做法是：在事件处理函数中显式调用 event.preventDefault()，它直接告诉浏览器：“不要执行表单的默认提交动作（如跳转、刷新）”，这是标准、可靠且推荐的解决方案。
以下是修复后的 send_mail 函数：
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',
'X-CSRFToken': getCookie('csrftoken') // ⚠️ Django 项目中务必携带 CSRF Token
},
body: JSON.stringify({
recipients,
subject,
body
})
})
.then(response => {
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return response.json();
})
.then(result => {
console.log('Email sent:', result);
load_mailbox('sent'); // 切换至 Sent 视图
})
.catch(error => {
console.error('Failed to send email:', error);
alert('Failed to send email. Please check the console for details.');
});
}同时，建议将事件监听改为更现代、更可控的方式（替代 onsubmit = ...）：
// 替换原来的 document.querySelector('#compose-form').onsubmit = send_mail;
document.addEventListener('DOMContentLoaded', function() {
// ... 其他初始化代码（inbox/sent/ compose 等）
// 使用 addEventListener 绑定 submit 事件（推荐）
document.querySelector('#compose-form').addEventListener('submit', send_mail);
});✅ 为什么 event.preventDefault() 是必需的？
- return false 在内联 onsubmit="..." 中可同时阻止默认行为和事件冒泡，但在 element.onsubmit = handler 赋值方式下，它仅影响该属性赋值的返回值，并不保证阻止默认行为（尤其在现代浏览器中行为不一致）。
- event.preventDefault() 是 W3C 标准 API，语义清晰、跨浏览器兼容、行为确定，是唯一推荐的阻止默认动作方式。
⚠️ 额外注意事项：
- 若后端使用 Django，务必在 fetch 请求头中添加 CSRF Token（如示例所示），否则 POST 请求会被拒绝；
- 建议为 fetch 添加错误处理（如网络失败、403/500 响应），提升用户体验；
- 避免在 send_mail 中直接操作 DOM 后再调用 load_mailbox('sent') 前清空表单——应在 then 回调中统一处理，确保异步成功后再切换视图。
遵循以上修改，表单将完全由 JavaScript 控制，路由保持稳定，真正实现单页应用的无缝交互体验。
