JavaScript中如何区分关闭标签与点击mailto触发的beforeunload事件

beforeunload 事件本身不提供触发源的相关属性，无法直接从事件回调的参数中区分是浏览器标签关闭触发，还是点击mailto链接触发，需要通过额外的全局标记方案实现需求。

核心思路是通过全局标记位手动记录触发源：

• 给页面内所有mailto链接绑定点击事件，点击时更新全局标记
• 在beforeunload回调中通过标记值判断触发源，执行对应逻辑
• 执行完成后重置标记位，避免影响后续事件判断

完整实现代码如下：

// 全局标记位，初始为false
let isMailtoClicked = false;

// 绑定所有静态mailto链接的点击事件
document.querySelectorAll('a[href^="mailto:"]').forEach(link => {
  link.addEventListener('click', () => {
    isMailtoClicked = true;
    // 兼容点击mailto不触发页面卸载的场景，延时重置标记位避免误判
    setTimeout(() => {
      isMailtoClicked = false;
    }, 100);
  });
});

window.addEventListener("beforeunload", function (e) {
  if(isMailtoClicked) {
    // 处理mailto链接点击的对应逻辑
    isMailtoClicked = false;
  } else {
    // 处理浏览器标签关闭/刷新/其他页面跳转的对应逻辑
  }
});

• 如果页面存在动态插入的mailto链接，需要在插入元素后额外给新元素绑定点击事件
• 部分浏览器点击mailto链接不会实际触发页面卸载，该场景下beforeunload本身不会执行，不需要额外处理
• 上述方案的else分支包含浏览器标签关闭、页面刷新、站内跳转等多个非mailto的卸载场景，目前没有100%准确区分标签关闭和页面刷新的通用方案

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