在单页应用中，表单默认提交会触发完整页面刷新或导航，即使已绑定 JavaScript 处理函数并返回 false，仍可能因事件未被显式阻止而跳转；正确做法是调用 event.preventDefault()。

在单页应用中，表单默认提交会触发完整页面刷新或导航，即使已绑定 javascript 处理函数并返回 `false`，仍可能因事件未被显式阻止而跳转；正确做法是调用 `event.preventdefault()`。

表单提交时浏览器的默认行为是：构造一个 HTTP POST 请求，将表单数据按 application/x-www-form-urlencoded 格式发送，并跳转至响应页面（或当前 URL）。即使你为 onsubmit 绑定了 send_mail 函数并末尾写了 return false;，该返回值仅对内联事件处理器（如

）生效；而你使用的是 document.querySelector('#compose-form').onsubmit = send_mail; —— 这种赋值方式下，send_mail 的返回值不会自动传递给事件系统，因此 return false 实际上无法阻止默认行为。

✅ 正确且推荐的解决方案是：在事件处理函数开头显式调用 event.preventDefault()：

jQuery金融借款单提交表单

jQuery金融借款单提交表单，包含出借金额和日期的选择，且自动计算利息，非常的简单方便。

下载

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() 是标准、可靠、跨浏览器的解决方式，应作为单页应用中表单提交处理的必备步骤。