JavaScript 中阻止页面关闭的方法

在 Web 开发中，有时我们需要阻止用户意外关闭页面，确保某些操作完成或提醒用户保存未完成的工作。JavaScript 提供了几种实现这一功能的方法。

最常用的方法是使用 beforeunload 事件。当用户试图离开当前页面时，会触发该事件。例如：

window.addEventListener('beforeunload', function (e) {
    e.preventDefault();
    e.returnValue = '您有未保存的内容，确定要离开吗？';
});

在上述代码中，addEventListener 用于监听 beforeunload 事件。当事件触发时，preventDefault 方法阻止默认的页面卸载行为，returnValue 属性则设置了一个提示信息。不过需要注意的是，不同浏览器对 returnValue 的显示方式可能有所不同。有些浏览器会直接显示设置的文本，有些则会给出默认的提示并附带该文本。

另外，unload 事件也与页面关闭相关。与 beforeunload 不同，unload 事件在页面开始卸载时触发，并且无法阻止页面的卸载。它主要用于执行一些清理操作，比如关闭 WebSocket 连接、清除定时器等。示例代码如下：

window.addEventListener('unload', function () {
    // 执行清理操作
    console.log('页面正在卸载');
});

还有一种场景是利用浏览器的 confirm 对话框结合自定义逻辑来实现类似效果。我们可以在页面中定义一个函数，当用户尝试进行可能导致页面关闭的操作（如点击链接到其他页面）时，调用该函数并弹出 confirm 对话框询问用户。如果用户点击“取消”，则阻止操作继续进行。

function confirmLeave() {
    if (confirm('您有未保存的内容，确定要离开吗？')) {
        // 允许离开
    } else {
        // 阻止离开
        return false;
    }
}

然后在链接的 onclick 事件中调用这个函数：

<a href="otherPage.html" onclick="return confirmLeave()">跳转到其他页面</a>

通过这些方法，开发者可以根据具体需求，在 JavaScript 中灵活地处理页面关闭相关的逻辑，提升用户体验，确保重要信息不会因为用户的误操作而丢失。