今天分享一段优质 JS 代码片段，实现在关闭或刷新浏览器窗口时做提示。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
js
window.addEventListener('beforeunload', function (event) {
const confirmationMessage = "确定要离开此页面吗？您所做的更改可能不会被保存。";
event.preventDefault();
event.returnValue = confirmationMessage;
return confirmationMessage;
});
分享原因
这段代码展示了如何使用 JavaScript 的 beforeunload 事件来提示用户在关闭或刷新浏览器窗口时确认操作，从而避免意外的数据丢失或操作中断。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
这种方法适用于 未保存的数据（如填写表单或编辑文档）、长时间操作（如文件上传或大规模数据处理）、敏感操作（如在线交易或重要系统设置）等场景。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
项目中用到时直接CV，但对于用户体验而言，不宜过度使用。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
代码解析
1. window.addEventListener('beforeunload', function (event) { ... })
为 window 对象添加一个 beforeunload 事件监听器。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
当用户试图关闭或刷新浏览器窗口时，此事件将被触发。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
2. event.preventDefault();
调用 event.preventDefault() 方法来阻止默认的浏览器行为。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
在大多数情况下，这一步是冗余的，因为 beforeunload 事件默认不会执行任何动作，但这可以确保兼容性。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
3. event.returnValue = confirmationMessage;
设置 event.returnValue 为 confirmationMessage 提示信息。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17293.html
这是确保在大多数现代浏览器中显示确认对话框的关键步骤。
4. return confirmationMessage;
返回 confirmationMessage 提示信息。
在一些旧版浏览器中，这一步是必要的，以确保显示提示信息。
评论