SPA路由脚本干扰邮件唤起表单，求纯原生JS解决方案

核心原因 #

SPA路由脚本通常会拦截页面上的点击/提交事件，阻止浏览器默认行为以实现无刷新跳转，但这会误拦截mailto:协议的链接/表单提交，导致邮件应用无法正常唤起。

解决方案（纯原生JS） #

1. 修改路由的点击事件监听 #

找到你路由脚本中监听全局click事件的代码，添加对mailto:协议的判断，跳过拦截逻辑：

document.addEventListener('click', function(e) {
  const targetLink = e.target.closest('a');
  
  if (!targetLink) return;

  const linkHref = targetLink.getAttribute('href');
  
  // 检测到mailto链接，直接放行，让浏览器处理默认行为
  if (linkHref.startsWith('mailto:')) {
    return;
  }

  // 仅处理站内路由链接（假设你的路由都是以/开头）
  if (linkHref.startsWith('/')) {
    e.preventDefault();
    // 你的路由跳转逻辑，比如navigateTo(linkHref)
    navigateTo(linkHref);
  }
});

2. 处理表单提交的情况 #

如果你的联系表单是通过submit事件触发mailto，需要在全局或表单的submit监听中添加判断：

document.addEventListener('submit', function(e) {
  const targetForm = e.target;
  const formAction = targetForm.getAttribute('action');

  // 如果表单action是mailto协议，不阻止默认提交
  if (formAction && formAction.startsWith('mailto:')) {
    return;
  }

  // 处理其他需要路由拦截的表单（如果有的话）
  e.preventDefault();
  // ...你的表单路由处理逻辑
});

3. 手动提交表单的特殊处理 #

如果你是通过JS手动触发表单提交（比如点击按钮后调用form.submit()），确保不要在提交前调用e.preventDefault()，或者添加协议判断：

const contactForm = document.getElementById('contact-form');

contactForm.addEventListener('submit', function(e) {
  const action = this.getAttribute('action');
  
  // 是mailto的话，让浏览器默认处理
  if (action.startsWith('mailto:')) {
    return;
  }

  // 其他表单的自定义处理逻辑
  e.preventDefault();
  // ...
});

测试验证 #

修改后测试：

• 点击联系表单的提交按钮，确认邮件应用正常唤起，且预填字段正确
• 测试其他站内链接，确保SPA路由仍能正常工作

内容的提问来源于stack exchange，提问作者Mauricio Laratro