当用户在浏览器中点击链接或者输入新的URL时，浏览器会尝试离开当前页面并加载新的页面。这个过程称为页面导航或页面卸载。但是，在某些情况下，我们希望阻止页面导航，比如在用户填写表单但是还没有保存的情况下。本文将介绍如何在JavaScript中阻止页面导航。
beforeunload 事件
beforeunload 是一个window对象上的事件，当即将卸载页面前会被触发。该事件处理程序可以返回一个字符串，提示用户在关闭页面之前进行确认。如果返回值不为空，浏览器将弹出一个提示框显示返回值，并询问是否确定要离开该页面。用户可以选择取消并留在当前页面，或继续导航到新页面。
以下示例代码演示了 beforeunload 事件的使用：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------ ---------------
-------
------
------
------ ----------- --------------- ------------------ ---- ----------
------ ------------- ---------------
-------
--------
--------------------------------------- --------------- -
-- ------ --- -----
-----------------------
-- ------ -------- ----------- -- -- ---
----------------- - ---
---
--------------------------------------------------------- --------------- -
-- ------ ----
---
---------
-------
-------上述代码创建了一个表单，当用户填写表单并尝试离开页面时，将弹出提示框。如果用户选择取消，则不会导航到新页面。
unload 事件
unload 事件发生在窗口、框架或对象卸载之前，并且是在 beforeunload 事件后发生的。与 beforeunload 不同的是，该事件不会阻止页面导航，它可以用来清除一些资源以避免内存泄露。
以下示例代码演示了如何使用 unload 事件：
window.addEventListener('unload', function(event) {
// Clean up resources
});结论
通过使用 beforeunload 和 unload 事件，我们可以有效地防止页面卸载和清理资源，从而提高页面的性能和稳定性。但是，请注意，滥用这些事件可能会影响用户体验，因此请谨慎使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12880