在开发 Web 应用程序时，我们经常遇到需要确保用户意识到他们正在做什么的情况。一个常见的例子是关闭标签页或浏览器窗口。如果用户误操作，可能会导致他们失去正在编辑的内容或未保存的更改。
为了应对这种情况，我们可以通过添加确认提示来提醒用户确认他们想要执行的操作。在本文中，我们将学习如何实现这样的功能。
使用 JavaScript 实现确认提示
最简单的方法是使用 JavaScript 来实现确认提示。我们可以利用 window.onbeforeunload 事件来拦截用户关闭标签页或浏览器窗口的操作，并弹出确认提示框。下面是一个示例代码：
window.onbeforeunload = function(e) {
e.preventDefault();
e.returnValue = '';
};上面的代码会在用户尝试关闭标签页或浏览器窗口时弹出一个确认提示框。如果用户选择“离开此页”，那么页面就会被关闭。
自定义确认提示信息
我们还可以自定义确认提示框的信息，以便更好地向用户解释正在发生的事情。下面是一个示例代码：
window.onbeforeunload = function(e) {
var confirmationMessage = '您有未保存的更改，是否确定离开？';
e.preventDefault();
e.returnValue = confirmationMessage;
return confirmationMessage;
};上面的代码会在用户尝试关闭标签页或浏览器窗口时弹出一个确认提示框，并向用户提供自定义的信息。如果用户选择“离开此页”，那么页面就会被关闭。
避免误报
虽然添加确认提示是很有用的，但它也可能会引起误报。例如，当用户单击导航链接或提交表单时，确认提示会弹出，即使用户并不想离开当前页面。为了避免这种情况，我们可以使用以下代码：
-- -------------------- ---- -------
--- ----------------- - -----
--------------------------------------- ----------- -
-- ------------------- -
-------------------
------------- - ---
-
---
-------- --------------------- -
----------------- - ------
-
-------- -------------------- -
----------------- - -----
-上面的代码会在用户尝试关闭标签页或浏览器窗口时弹出一个确认提示框，但同时还提供了两个函数来启用或禁用确认提示功能。通过调用 disableConfirmation 函数，我们可以临时禁用确认提示，从而避免误报。
结论
在本文中，我们了解了如何通过 JavaScript 实现确认提示，以便在用户尝试关闭标签页或浏览器窗口时提醒他们确认他们正在做什么。我们还学习了如何自定义确认提示信息和避免误报。通过这些技术，我们可以帮助用户避免意外地丢失他们正在编辑的内容或未保存的更改。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25893