仅在浏览器关闭按钮触发时弹窗，而非页面加载/刷新切换时

你遇到的这个问题太常见了——原生的beforeunload事件会在所有导致页面卸载的场景触发，包括刷新页面、点击跳转链接、切换标签页，甚至浏览器后退，而不只是关闭标签/窗口。要实现仅在用户点击关闭按钮时弹窗，我们需要做一些额外的判断来区分不同的卸载场景。

核心思路 #

我们可以通过两种方式结合来精准区分：

• 追踪用户的主动交互：比如用户点击页面内链接、按下刷新键时，标记为非关闭操作，取消弹窗提醒。
• 监听鼠标位置：浏览器的关闭按钮通常在窗口右上角，当鼠标移动到这个区域时，标记为可能的关闭操作，恢复弹窗提醒。

完整代码实现 #

// 标记是否需要触发关闭提醒
let shouldWarnOnClose = true;

// 监听页面内的链接点击，点击跳转时取消提醒
document.addEventListener('click', function(e) {
  const target = e.target;
  // 仅针对当前域名下的链接（如果需要包含外部链接，可去掉host判断）
  if (target.tagName === 'A' && target.host === window.location.host) {
    shouldWarnOnClose = false;
  }
});

// 监听F5刷新按键，按下时取消提醒
document.addEventListener('keydown', function(e) {
  if (e.key === 'F5') {
    shouldWarnOnClose = false;
  }
});

// 监听鼠标移动到窗口右上角（关闭按钮区域）
document.addEventListener('mouseover', function(e) {
  // 假设关闭按钮在右上角200x200的区域，可根据浏览器/系统调整大小
  if (e.clientX > window.innerWidth - 200 && e.clientY < 200) {
    shouldWarnOnClose = true;
  } else {
    shouldWarnOnClose = false;
  }
});

// 处理beforeunload事件，仅在标记为关闭操作时触发提醒
window.addEventListener('beforeunload', function(event) {
  if (!shouldWarnOnClose) {
    return; // 不触发提醒
  }
  const message = 'Sure you want to leave?';
  if (event) {
    event.returnValue = message;
  }
  return message;
});

补充说明 #

• 链接判断逻辑：如果希望用户点击外部链接时也不弹窗，可以去掉target.host === window.location.host的限制。
• 鼠标区域调整：不同浏览器/系统的关闭按钮位置略有差异，你可以根据实际情况调整200这个阈值，让判断更精准。
• 浏览器限制：部分现代浏览器会忽略自定义的提示文案，显示系统默认弹窗，这是浏览器的安全策略，无法绕过。

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