React实现仅关闭浏览器标签页触发弹窗，刷新时不触发

浏览器没有原生API能直接区分页面关闭、刷新、前进后退这些操作，我们只能通过捕捉用户的交互行为特征，间接判断操作类型，从而精准触发关闭提示。以下是可落地的实现方案：

1. 通过鼠标位置标记关闭操作 #

用户点击浏览器右上角关闭按钮时，鼠标通常会从页面右上角区域离开窗口。我们可以监听鼠标进出页面的事件来标记是否为关闭操作：

let isClosing = false;

// 监听鼠标离开页面窗口
document.addEventListener('mouseout', (e) => {
  // 判断鼠标是否从页面顶部/右上角离开（适配桌面端浏览器）
  if (e.clientY <= 0 || e.clientX >= window.innerWidth - 10) {
    isClosing = true;
  }
});

// 鼠标回到页面时重置标记
document.addEventListener('mouseover', () => {
  isClosing = false;
});

2. 监听刷新/前进后退的按键事件 #

针对键盘触发的刷新、前进后退操作，直接捕获按键组合并标记为非关闭操作：

document.addEventListener('keydown', (e) => {
  // 捕获刷新按键：F5、Ctrl+R
  if ((e.key === 'F5') || (e.ctrlKey && e.key.toLowerCase() === 'r')) {
    isClosing = false;
  }
  // 捕获前进后退按键：Alt+左箭头、Alt+右箭头
  if (e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
    isClosing = false;
  }
});

3. 排除页面内跳转操作 #

用户点击页面链接、提交表单属于正常跳转，需要提前重置关闭标记：

// 监听所有页面内链接点击
document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    isClosing = false;
  });
});

// 监听表单提交事件
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', () => {
    isClosing = false;
  });
});

4. 结合beforeunload触发专属提示 #

在beforeunload事件中，根据标记判断是否显示关闭提示。注意：部分现代浏览器会强制替换自定义提示文案，但核心逻辑不受影响：

window.addEventListener('beforeunload', (e) => {
  if (isClosing) {
    const tipMessage = '您确定要关闭标签页吗？确定的话将退出登录';
    e.returnValue = tipMessage;
    return tipMessage;
  }
  // 非关闭操作，不显示提示
  delete e.returnValue;
});

关键说明 #

• 该方案是基于用户行为的推测，无法做到100%精准（比如用户可能在右上角点击页面元素），但能覆盖绝大多数常规场景。
• 移动端浏览器无法通过鼠标位置判断关闭操作，可结合visibilitychange事件补充，但效果有限。
• Chrome、Edge等浏览器会屏蔽自定义提示文案，仅显示系统默认提示，但关闭时触发提示的逻辑依然生效。

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