beforeunload事件仅在用户明确执行离开页面动作（如关闭、刷新、导航）时触发并弹出确认框，无法区分具体行为类型；它不响应单纯切换标签页，此时应使用visibilitychange检测页面可见性变化。
beforeunload 是唯一能在用户切换标签页（或关闭、刷新、导航）前触发并弹出原生确认对话框的机制，但它只对“离开当前页面”有效，不能区分是切到其他标签页还是关掉窗口——浏览器不提供单独监听“标签页失焦”的 API。
为什么 beforeunload 会触发切换标签页时的提示
当用户点击地址栏、按 Ctrl+Tab、点击其他标签页，或用鼠标点击任务栏另一个窗口时，当前页面进入 visibilitychange 隐藏状态，但不会立刻触发 beforeunload；只有当用户明确执行“离开当前页面”的动作（如输入新 URL、点击链接、关闭标签页、刷新），beforeunload 才会触发。所以它不是“监听切标签”，而是“拦截所有离开行为”，包括切标签后又在新标签页里输入网址跳走这种间接路径。
- 仅当页面有未保存数据时才应设置
beforeunload监听器，否则会被浏览器忽略（Chrome 从 2019 年起强制要求：无用户交互前设的beforeunload不显示提示） - 必须在用户有实际输入后才动态添加监听器，例如监听
input、change或blur事件后调用window.addEventListener('beforeunload', handler) -
event.returnValue = ''是必需的，仅event.preventDefault()不起作用
visibilitychange 能做什么、不能做什么
visibilitychange 可以检测用户是否切走了标签页（document.visibilityState === 'hidden'），但它无法阻止任何行为，也不能弹出确认框——这是浏览器安全限制。它的典型用途是暂停视频、暂停轮询、节省资源，而非拦截导航。
- 不要试图在
visibilitychange里调用alert()或confirm()：现代浏览器会静默丢弃，且可能报错 - 不要用它替代
beforeunload：它不触发页面卸载，也不允许中断用户操作 - 可配合使用：在
visibilitychange中记录“用户已离开”，再结合beforeunload判断是否真要丢弃数据
常见失效原因和绕过点
很多开发者以为加了 beforeunload 就万事大吉，结果测试时发现没弹窗，或者只在刷新时生效、切标签页却没反应——根本问题往往出在时机或上下文上。
立即学习“前端免费学习笔记（深入）”；
- 监听器在页面加载完成前就绑定了：Chrome 会直接忽略，必须等用户有交互（如点击、输入）后再绑定
- 用了
async脚本或模块化加载，导致监听器注册晚于用户首次离开动作 - 单页应用（SPA）中，内部路由跳转（如 React Router、Next.js）不触发
beforeunload，需额外监听路由事件（如router.events.on('routeChangeStart')）并手动管理脏状态 - 设置了
event.returnValue但值为undefined或null：必须是字符串（哪怕空字符串）
真正难处理的不是“怎么弹窗”，而是判断“什么时候才算未保存”——表单控件值变了但没触发 change 事件（比如用 JS 直接改 value）、富文本编辑器内容变更未暴露接口、或异步加载的数据还没写入 DOM。这些都需要你主动维护一个“脏标记”，而不是依赖 DOM 快照比对。
