在Web应用程序中，当用户试图离开一个页面时，通常会弹出一个确认对话框来询问他们是否确定要离开。这是一个重要的功能，可以帮助防止用户无意中离开或丢失数据。
事件监听
在浏览器中，我们可以监听beforeunload事件，该事件会在用户尝试离开页面时触发。通过监听该事件，我们可以在用户离开页面之前显示确认对话框。
window.addEventListener("beforeunload", function(event) {
event.preventDefault();
event.returnValue = "";
});在上述示例代码中，我们添加了一个beforeunload事件监听器，并阻止了默认的行为以及设置了returnValue属性为空字符串，这将导致浏览器在用户尝试离开该页面时显示一个确认对话框。
要显示一个自定义的确认消息，我们可以简单地将returnValue属性设置为消息文本。
window.addEventListener("beforeunload", function(event) {
event.preventDefault();
event.returnValue = "您确定要离开此页吗？";
});条件判断
有时，我们可能只想在特定条件下显示确认对话框。例如，在用户填写表单但未保存更改时，我们可以在用户尝试离开页面时显示确认对话框。
-- -------------------- ---- -------
--- ----------- - ------
------------------------------------------------------------- ---------- -
----------- - -----
---
--------------------------------------- --------------- -
-- ------------- -
-----------------------
----------------- - ----------------------
-
---在上述示例代码中，我们使用change事件监听器来检测表单是否已更改。如果表单已更改，则我们将formChanged变量设置为true，并在用户尝试离开页面时显示一个确认对话框。
总结
在Web应用程序中，显示确认对话框可以帮助防止用户无意中离开或丢失数据，同时也可以提示用户保存未保存的更改。通过监听beforeunload事件并根据需要设置returnValue属性，我们可以轻松地实现这个功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8990
