JavaScript 中事件捕获与冒泡怎么在 beforeunload 事件中阻止用户意外关闭页面-js教程-PHP中文网

beforeunload事件仅在window对象上触发，不支持捕获/冒泡，无法在document或元素上监听，也不响应stopPropagation；正确用法是window.addEventListener('beforeunload', handler)，handler中返回非空字符串以触发浏览器确认对话框。

javascript 中事件捕获与冒泡怎么在 beforeunload 事件中阻止用户意外关闭页面

beforeunload 事件本身不支持事件捕获或冒泡，它只能在 window 对象上直接监听，且浏览器强制限制其行为逻辑——你无法通过事件传播机制（如捕获/冒泡）来干预或阻止它被触发。

为什么 beforeunload 不走捕获/冒泡流程？

该事件是浏览器专为页面卸载前设计的特殊生命周期事件，属于“顶级全局事件”，仅在 window 上触发，不经过 DOM 树传播。因此：

添加 { capture: true } 或 { capture: false } 都无效；
在 document、body 或任意元素上监听 beforeunload 不会生效；
调用 event.stopPropagation() 或 event.stopImmediatePropagation() 没有意义，因为没有传播链。

如何正确使用 beforeunload 阻止意外关闭？

只需在 window 上设置返回非空字符串（现代浏览器已忽略自定义文案，但返回值仍需存在），即可触发浏览器原生确认对话框：

sc-java-to-ts-interface

将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。

下载

必须使用 addEventListener 或直接赋值 window.onbeforeunload；
回调函数需返回一个字符串（如 "确定要离开吗？"），或在较新浏览器中返回任意真值（但兼容性起见仍建议返回字符串）；
仅当页面有未保存更改等“脏状态”时才设置监听，避免无意义打扰用户；
用户一旦做出选择（离开/取消），该事件不会再次触发，除非你重新绑定。

实际写法示例

推荐方式（可移除）：

let isFormDirty = false;

// 监听表单变化
document.getElementById('myForm').addEventListener('input', () => {
  isFormDirty = true;
});

// 设置 beforeunload
const handleBeforeUnload = (e) => {
  if (isFormDirty) {
    e.preventDefault();
    e.returnValue = '您有未保存的更改，确定要离开吗？';
    return e.returnValue;
  }
};

window.addEventListener('beforeunload', handleBeforeUnload);

// 提交后清除监听（或设 isFormDirty = false）
document.getElementById('myForm').addEventListener('submit', () => {
  isFormDirty = false;
  window.removeEventListener('beforeunload', handleBeforeUnload);
});