如何用JavaScript实现浏览器窗口关闭按钮点击时的提示弹窗

代码错误分析 #

你当前的代码存在两个核心问题：

1. 事件回调写法错误：addEventListener的第二个参数必须是函数，你直接写赋值语句会导致代码立即执行，而非在事件触发时执行。
2. 错误使用unload事件：unload事件是页面即将完成卸载时触发，此时无法阻止页面关闭，只有beforeunload事件能触发确认弹窗并拦截卸载流程。

浏览器限制说明 #

现代主流浏览器（Chrome、Firefox、Edge等）出于安全和统一用户体验的考虑，做了以下限制：

• 无法自定义提示文本：无论你设置e.returnValue为任何内容，弹窗都会显示浏览器默认的提示文案，自定义文本会被忽略。
• 无法控制按钮行为：弹窗的“离开”“取消”按钮是浏览器原生控件，其文案、点击逻辑完全由浏览器控制，开发者无法修改。

正确实现代码 #

window.addEventListener('beforeunload', function(e) {
  // 触发弹窗的必要操作，兼容不同浏览器
  e.preventDefault();
  e.returnValue = ''; // 任意值即可，仅用于触发弹窗
  return ''; // 部分浏览器需要此返回值
});

关键注意事项 #

• 只有当页面存在未保存的用户输入等场景时，才建议使用此功能，滥用会影响用户体验。
• 若需要完全自定义弹窗样式和逻辑，只能在页面内提前监听用户操作（比如检测表单未保存），显示自定义弹窗引导用户，但这种方式无法强制阻止浏览器关闭，只能依赖用户主动选择留在页面。

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