如何阻止表单提交导致的页面跳转（Route 变更）

• 函数未被正确传入事件对象（如 onsubmit = send_mail 不带参数，event 为 undefined）；
• return false 在旧式内联绑定中虽可阻止默认行为和冒泡，但在现代事件监听器中语义不明确，且易受执行上下文影响；
• 您当前的 send_mail 函数并未接收 event 参数，因此 event.preventDefault() 无法调用，return false 也因作用域或绑定方式失效。

✅ 正确解决方案是使用标准事件监听器，并在函数首行调用 event.preventDefault()：

// 替换原来的：document.querySelector('#compose-form').onsubmit = send_mail;
document.querySelector('#compose-form').addEventListener('submit', function(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 => response.json())
  .then(result => {
    console.log('Email sent:', result);
    load_mailbox('sent');
  })
  .catch(error => {
    console.error('Failed to send email:', error);
  });
});

⚠️ 注意事项：

PathFinder

AI驱动的销售漏斗分析工具

下载

• 不要省略 headers: { 'Content-Type': 'application/json' } —— Django 等后端通常依赖此头解析 JSON 请求体；
• 避免混用 onsubmit= 属性与 addEventListener，推荐统一使用后者，更可控、可移除、符合现代实践；
• return false 在箭头函数或非直接 onsubmit= 场景下不具备阻止默认行为的能力，它仅等价于 event.stopPropagation() + event.preventDefault() 在传统 onclick 等场景中，但对 submit 事件不可靠；
• 若需兼容旧代码，也可保留 onsubmit 赋值，但必须确保函数签名接收 event 并显式调用 preventDefault()：

function send_mail(event) {
  event.preventDefault(); // ✅ 必须存在
  // ...其余逻辑
}
document.querySelector('#compose-form').onsubmit = send_mail;

总结：表单路由跳转的根本原因是浏览器默认提交行为未被显式阻止。event.preventDefault() 是标准、可靠、语义明确的解决方式，应始终作为表单 AJAX 提交处理函数的第一行代码。