如何实现仅关闭浏览器时触发动作，避免刷新、页面跳转时也触发

• 浏览器出于安全策略，没有提供专门的「仅关闭浏览器/标签页」的原生事件，beforeunload 是所有页面卸载场景都会触发的，包括页面刷新、站内跳转、跳转到外部站点、关闭标签页、关闭浏览器窗口，无法通过原生API直接100%精准区分唯一的关闭浏览器场景，只能通过辅助条件做近似判断。

你可以结合鼠标位置、页面内操作标记两个维度，过滤掉大部分非关闭浏览器的场景：

1. 先标记所有页面内触发的卸载操作

// 全局标记，默认为false，代表不是页面内主动触发的卸载
window.isInnerUnload = false;

// 拦截所有a标签跳转场景
$('a').on('click', function() {
  window.isInnerUnload = true;
});
// 拦截表单提交场景
$('form').on('submit', function() {
  window.isInnerUnload = true;
});
// 拦截F5、Ctrl+R主动刷新场景
document.addEventListener('keydown', function(e) {
  if ((e.ctrlKey && e.key.toLowerCase() === 'r') || e.key === 'F5') {
    window.isInnerUnload = true;
  }
});

2. 结合鼠标位置判断是否点击浏览器右上角的关闭按钮

// 标记鼠标是否从页面顶部移出（大概率是移动到浏览器的关闭/刷新按钮区域）
let isMouseLeaveFromTop = false;
document.addEventListener('mouseleave', function(e) {
  if (e.clientY <= 0) {
    isMouseLeaveFromTop = true;
  }
});
document.addEventListener('mouseenter', function() {
  isMouseLeaveFromTop = false;
});

// 改造你的beforeunload逻辑
$(window).bind("beforeunload", function (e){
  // 仅当「不是页面内主动触发卸载」+「鼠标从页面顶部移出」时，才判定为可能是关闭浏览器操作
  if (!window.isInnerUnload && isMouseLeaveFromTop) {
    return "close window?";
  }
});

• 上述方案只能覆盖大部分常见场景，无法100%准确识别所有关闭浏览器的操作，比如用户用Alt+F4快捷键关闭窗口的场景就无法通过上述规则判断
• 现代浏览器对beforeunload的自定义提示有严格限制，大部分场景下只会显示浏览器默认的提示文本，不会显示你自定义的返回内容
• 不要在beforeunload回调中执行普通异步Ajax请求，浏览器会直接拦截这类请求，如果你需要上报数据可以用navigator.sendBeacon接口

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