如何实现仅关闭浏览器标签页时触发JS提示，刷新页面时不触发？

原生的window.onbeforeunload事件无法直接区分刷新页面、跳转至其他页面和关闭标签页这几种操作——它们都会触发该事件。要实现仅关闭标签时弹出提示，我们可以通过监听用户交互行为间接判断操作类型：只有当用户点击浏览器窗口的关闭区域（如顶部标题栏）时触发提示；页面内的跳转、刷新或打开新窗口操作则不触发。

以下是修改后的完整代码：

// 标记是否为关闭标签页的操作
let isClosingTab = false;

// 监听鼠标离开页面的事件，判断是否指向浏览器关闭区域
document.addEventListener('mouseout', (e) => {
  // 当鼠标离开页面可视区域且位置在页面顶部（通常是浏览器关闭按钮所在区域）
  if (e.clientY < 0) {
    isClosingTab = true;
  }
});

// 监听页面内的点击事件（比如跳转链接、按钮），重置状态
document.addEventListener('click', () => {
  isClosingTab = false;
});

// 监听键盘刷新快捷键，重置状态
document.addEventListener('keydown', (e) => {
  if ((e.key === 'F5') || (e.ctrlKey && e.key === 'r')) {
    isClosingTab = false;
  }
});

// 处理beforeunload事件
window.onbeforeunload = function(e) {
  // 仅当标记为关闭标签页时，返回提示文本
  if (isClosingTab) {
    return 'Sure?';
  }
  // 其他情况不返回内容，不会弹出提示
  return null;
};

// 原有的窗口操作函数，添加状态重置
let openedWindow;

function openWindow() {
  isClosingTab = false; // 打开新窗口时重置状态，避免误触发提示
  openedWindow = window.open("moreinfo.htm");
}

function closeOpenedWindow() {
  openedWindow.close();
}

代码说明： #

• isClosingTab：用于标记当前操作是否为关闭标签页，默认值为false。
• mouseout事件监听：当鼠标移出页面可视区域且位置在顶部时，判定用户可能要关闭标签，将isClosingTab设为true。
• click事件监听：页面内的任何点击（跳转链接、按钮等）都会重置状态，确保跳转时不弹出提示。
• keydown事件监听：捕获刷新快捷键（F5、Ctrl+R），重置状态避免刷新时弹出提示。
• beforeunload事件：仅在isClosingTab为true时返回提示文本，否则返回null，不会触发提示。
• 原openWindow函数添加状态重置，确保打开新窗口时不会误触发关闭提示。

注：这种方案是基于用户行为的间接判断，无法100%覆盖所有极端场景（比如通过任务管理器关闭浏览器），但能覆盖绝大多数常规操作场景。

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