如何移除浏览器beforeunload离开确认弹窗兼容React及原生JS全浏览器实现

云原生阿岚

2026-10-7

你之前尝试删除returnValue的操作不生效，是因为浏览器提供的beforeunload事件对象的returnValue是不可删除的内置属性，delete操作不会生效；赋值null、false会被自动转为字符串，属于非空值，也会触发弹窗。

可行解决方案

核心规则

符合W3C规范的弹窗触发逻辑：只要beforeunload事件的returnValue是非空字符串，或事件处理函数返回了非空值，浏览器就会弹出确认框。反之满足以下两个条件就不会触发弹窗：

不给ev.returnValue赋值任何非空内容
事件处理函数不return任何非空内容

方案1：拦截覆盖已有监听（兼容所有场景）

如果是其他业务代码/第三方依赖绑定了触发弹窗的beforeunload事件，可以通过捕获阶段优先执行我们的逻辑，覆盖其他监听的赋值操作：

原生JS实现

const blockUnloadPopup = (ev) => {
  ev.preventDefault();
  // 仅赋值为空字符串，不要赋值其他内容
  ev.returnValue = '';
};
// 第三个参数设为true开启捕获阶段监听，执行优先级比冒泡阶段的原有监听更高
window.addEventListener('beforeunload', blockUnloadPopup, true);

// 不需要拦截时记得移除监听
// window.removeEventListener('beforeunload', blockUnloadPopup, true);

React实现

useEffect(() => {
  const blockUnloadPopup = (ev) => {
    ev.preventDefault();
    ev.returnValue = '';
  };
  window.addEventListener('beforeunload', blockUnloadPopup, true);
  
  return () => {
    window.removeEventListener('beforeunload', blockUnloadPopup, true);
  };
}, []);