如何拦截窗口关闭事件且不与页面跳转/表单提交触发混淆？

嘿，这个问题我之前也碰到过——window.onbeforeunload的触发范围确实太广了，不管是用户关页面、刷新，还是页面自己跳转、表单提交都会弹提示，挺烦人的。要实现只拦截「用户主动关闭页面」，核心思路就是给主动发起的跳转/提交操作打个标记，让onbeforeunload能识别出来，跳过这些情况。下面给你原生JS和jQuery两种方案，都亲测好用：

我们通过一个全局标记来区分“用户主动关闭/刷新”和“页面主动跳转/提交”，具体步骤如下：

1. 初始化一个标记变量，默认认为是用户主动操作（关闭/刷新）
2. 给所有会触发页面跳转的操作（比如点击链接、表单提交）绑定事件，把标记改成“非用户主动”
3. 在beforeunload事件里判断标记，只在用户主动操作时拦截

// 初始化标记：默认是用户主动触发的关闭/刷新
let shouldPreventUnload = true;

// 拦截所有<a>标签的跳转（排除锚点链接，比如#top这种不刷新页面的）
document.addEventListener('click', function(e) {
  const targetLink = e.target.closest('a');
  if (targetLink && targetLink.href && !targetLink.hash) {
    shouldPreventUnload = false;
  }
});

// 拦截表单提交事件
document.addEventListener('submit', function() {
  shouldPreventUnload = false;
});

// 如果你有通过JS主动修改location.href的场景，记得手动设置标记
// 示例：按钮点击跳转
// document.getElementById('jumpBtn').addEventListener('click', function() {
//   shouldPreventUnload = false;
//   location.href = '/new-page';
// });

// 处理beforeunload事件
window.addEventListener('beforeunload', function(e) {
  if (shouldPreventUnload) {
    // 注意：大部分现代浏览器会忽略自定义提示语，显示自带的安全提示
    const promptMessage = '你确定要离开吗？未保存的内容可能会丢失。';
    e.returnValue = promptMessage;
    return promptMessage;
  }
  // 非用户主动操作，不拦截，清除返回值
  delete e.returnValue;
});

思路和原生JS完全一致，只是用jQuery的事件绑定语法更简洁：

// 初始化标记
let shouldPreventUnload = true;

// 拦截<a>标签跳转（排除锚点链接）
$('a').on('click', function() {
  const linkHref = $(this).attr('href');
  if (linkHref && linkHref.indexOf('#') !== 0) {
    shouldPreventUnload = false;
  }
});

// 拦截表单提交
$('form').on('submit', function() {
  shouldPreventUnload = false;
});

// 处理beforeunload事件
$(window).on('beforeunload', function(e) {
  if (shouldPreventUnload) {
    const promptMessage = '你确定要离开吗？未保存的内容可能会丢失。';
    e.returnValue = promptMessage;
    return promptMessage;
  }
  delete e.returnValue;
});

额外注意点 #

• 自定义提示语限制：大部分现代浏览器为了安全，会强制使用自带的提示语，忽略你写的自定义内容，这是浏览器的限制，没办法绕过。
• SPA路由场景：如果是Vue/React这类单页应用，内部路由跳转不会触发页面卸载，所以不需要处理；如果是跳转到外部页面，记得在路由守卫里设置shouldPreventUnload = false。
• history.pushState/replaceState：这类API只是修改浏览器历史记录，不会触发页面卸载，所以也不会触发beforeunload，不用额外处理。

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