beforeunload 经常没反应是因浏览器策略变更：需用户交互后注册、禁止异步操作、返回值文字被统一替换；SPA 路由不触发，须结合 localStorage 草稿保存、路由守卫和二次确认等更可靠方案。
页面即将关闭或跳转时，beforeunload 事件确实能触发提示，但现代浏览器已严格限制其行为：无法自定义提示文案，且仅在用户有未保存操作等“真实变更”时才可能生效；直接写 window.addEventListener('beforeunload', ...) 很可能静默失效。
为什么 beforeunload 经常没反应？
不是代码写错了，而是浏览器策略变了：
- Chrome、Edge、Firefox 等主流浏览器要求必须在用户交互（如点击、输入）后，才允许注册有效的
beforeunload监听器；页面加载完立刻绑定，大概率被忽略 - 监听器内不能调用异步操作（如
fetch或setTimeout），否则视为“无实质拦截意图”，不显示提示 - 返回值必须是字符串（旧写法）或直接
return（新规范），但浏览器会忽略你写的文字，统一显示“要离开此页面吗？更改可能不会保存。” - SPA 路由跳转（如 Vue Router、React Router）默认不触发
beforeunload，需额外监听路由守卫
怎么让 beforeunload 实际生效？
关键不是“怎么写”，而是“什么时候写”和“是否真有脏数据”：
- 在用户首次输入、修改表单字段后，再动态添加监听器：
inputEl.addEventListener('input', () => { window.addEventListener('beforeunload', handleBeforeUnload); }); - 监听器函数里必须返回一个非空字符串（兼容旧版）或直接
return true（部分新版仍认这个）：function handleBeforeUnload(e) { e.preventDefault(); return '您有未保存的内容，确定要离开吗？'; // 文字会被忽略，但必须存在 } - 离开前清理监听器（比如表单提交成功后）：
window.removeEventListener('beforeunload', handleBeforeUnload);，避免全局污染
替代方案比硬扛 beforeunload 更可靠
如果你真正想防的是“用户误关页导致数据丢失”，以下方式更可控：
立即学习“前端免费学习笔记（深入）”；
- 用
localStorage持续保存草稿，每次输入后立即存：localStorage.setItem('form_draft', JSON.stringify(formData));，页面重进时自动恢复 - SPA 场景优先用框架级路由守卫：
router.beforeEach（Vue）或usePrompt（React Router v5）；v6+ 需配合useBlocker（@remix-run/router） - 对关键操作（如删除、提交）加二次确认弹窗，而不是依赖页面级提示 —— 用户注意力在那里，成功率高得多
真正难的不是监听那个事件，而是判断“用户到底有没有改东西”。靠 beforeunload 只能兜底，不能当主力。表单状态管理、本地缓存、路由控制，三者配合才能稳住体验。
