解绑window.onunload与onbeforeunload函数无效，页面刷新仍弹出确认框

我太懂这种头疼的情况了——明明给事件设了null，浏览器的刷新确认弹窗还顽固地弹出来！咱们一步步拆解问题，找到根源：

为什么直接赋值null没用？ #

首先，如果你是用直接赋值的方式绑定的事件（就像你写的window.onbeforeunload = function(){...}），理论上window.onbeforeunload = null是完全可以清除这个监听的。但没生效的话，大概率是这两个原因之一：

1. 你的解绑代码执行时机不对：比如你在绑定事件之前就执行了null赋值，那后面的绑定会覆盖掉这个操作，等于白做。
2. 页面里还有其他代码用addEventListener绑定了这些事件：这种情况下，直接给on[event]赋值null只会清除通过on[event]绑定的监听，对addEventListener绑定的完全无效。

针对性解决方案 #

情况1：确认解绑时机 #

先确保你的解绑代码是在事件绑定之后执行的。比如如果你的事件绑定是在DOMContentLoaded里，那解绑代码要在那之后（比如用户点击某个按钮时触发解绑）：

// 绑定事件
window.addEventListener('DOMContentLoaded', () => {
  window.onbeforeunload = function(e){ 
    // mycode2 
    return ''; 
  };
});

// 解绑（比如点击按钮时执行）
document.getElementById('unbind-btn').addEventListener('click', () => {
  window.onbeforeunload = null;
  window.onunload = null;
});

情况2：处理addEventListener绑定的监听 #

如果是其他代码用addEventListener绑定了beforeunload/unload，你需要用removeEventListener来清除，但前提是你能拿到绑定的函数引用。如果是匿名函数，就麻烦了，这时候可以用下面的方法来批量清除：

方法1：DevTools排查（调试用）

在Chrome DevTools的控制台输入：

getEventListeners(window).beforeunload

这会列出所有绑定到beforeunload的监听函数，你可以看到有没有其他未知的绑定。注意这个是Chrome专属的调试API，不能在生产环境代码里用。

方法2：生产环境批量清除（提前拦截）

如果无法提前拿到函数引用，可以在页面加载初期就替换window.addEventListener，记录所有绑定的事件函数，之后就能批量移除：

// 页面加载最开始就执行这段代码，拦截所有事件绑定
const originalAdd = window.addEventListener;
const originalRemove = window.removeEventListener;
const eventStore = {};

window.addEventListener = function(type, listener) {
  if (!eventStore[type]) eventStore[type] = [];
  eventStore[type].push(listener);
  return originalAdd.call(this, type, listener);
};

window.removeEventListener = function(type, listener) {
  if (eventStore[type]) {
    eventStore[type] = eventStore[type].filter(fn => fn !== listener);
  }
  return originalRemove.call(this, type, listener);
};

// 之后需要解绑时执行：
function unbindUnloadEvents() {
  // 清除直接赋值的监听
  window.onbeforeunload = null;
  window.onunload = null;

  // 清除addEventListener绑定的beforeunload
  if (eventStore.beforeunload) {
    eventStore.beforeunload.forEach(listener => {
      window.removeEventListener('beforeunload', listener);
    });
    eventStore.beforeunload = [];
  }

  // 清除addEventListener绑定的unload
  if (eventStore.unload) {
    eventStore.unload.forEach(listener => {
      window.removeEventListener('unload', listener);
    });
    eventStore.unload = [];
  }
}

// 调用解绑函数
unbindUnloadEvents();

注意：这段拦截代码必须在其他绑定事件的代码之前执行，否则记录不到之前的绑定。

额外提醒：浏览器对beforeunload的行为变化 #

现在主流浏览器（比如Chrome、Firefox）对beforeunload的处理有规范：只要事件处理函数返回了非undefined的值，或者调用了event.preventDefault()，就会触发确认弹窗。如果你解绑后还是弹窗，要检查有没有其他代码偷偷做了这些操作。

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