求仅检测浏览器/标签页关闭事件的代码片段，请勿推荐onbeforeunload

浏览器并没有原生事件能完全精准区分标签页/浏览器关闭和页面导航（比如点击链接、刷新、输入新地址），但可以通过组合多个事件和交互条件来大幅降低误判概率，尽可能精准地捕捉关闭动作：

let isIntentionalNavigation = false;
let mouseNearCloseArea = false;

// 标记页面内的主动导航行为
document.addEventListener('click', e => {
  if (e.target.tagName === 'A' && e.target.origin === window.location.origin) {
    isIntentionalNavigation = true;
  }
});

document.addEventListener('submit', () => {
  isIntentionalNavigation = true;
});

// 监听鼠标是否靠近浏览器关闭按钮区域（右上角，可根据实际情况调整阈值）
document.addEventListener('mousemove', e => {
  mouseNearCloseArea = e.clientY < 60 && e.clientX > window.innerWidth - 60;
});

// 结合页面可见性变化判断
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden' && !isIntentionalNavigation && mouseNearCloseArea) {
    // 执行数据持久化操作，务必添加keepalive确保请求完成
    fetch('/your-save-api', {
      method: 'POST',
      body: JSON.stringify({ yourData: '需要保存的内容' }),
      headers: { 'Content-Type': 'application/json' },
      keepalive: true
    });
  }
});

// beforeunload兜底，避免visibilitychange未触发的场景
window.addEventListener('beforeunload', e => {
  if (!isIntentionalNavigation && mouseNearCloseArea) {
    fetch('/your-save-api', {
      method: 'POST',
      body: JSON.stringify({ yourData: '需要保存的内容' }),
      headers: { 'Content-Type': 'application/json' },
      keepalive: true
    });
    // 不要设置e.returnValue，避免弹出关闭确认提示
  }
});

核心注意点： #

• keepalive参数：必须添加，否则页面关闭时浏览器会直接终止未完成的HTTP请求，导致数据丢失。
• 导航行为标记：排除用户点击站内链接、提交表单等主动离开的场景，减少误触发。
• 鼠标位置判断：利用关闭按钮通常在窗口右上角的特性，辅助判断用户的操作意图。
• 这种方案无法做到100%无误差，但能覆盖绝大多数真实的标签页/浏览器关闭场景，同时避免正常导航时的误操作。

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