如何在 JavaScript 中可靠地仅检测浏览器窗口关闭事件？

浏览器窗口关闭事件：综合指南

jQuery 提供了“beforeunload”事件来捕获用户尝试离开页面的时刻。网页。然而，该事件不仅会在窗口关闭时触发，还会在表单提交等操作时触发。为了解决这个问题，让我们深入研究一下捕获浏览器窗口关闭事件的细节。

“beforeunload”事件，顾名思义，每当用户离开当前页面时就会触发。这包括表单提交、链接点击、关闭窗口或选项卡以及使用各种方式导航到新页面。

为了说明这一点，请考虑以下 jQuery 代码：

jQuery(window).bind(
    "beforeunload",
    function() {
        return confirm("Do you really want to close?")
    }
)

虽然此代码片段尝试捕获窗口关闭事件，它也会无意中触发其他操作的确认对话框，例如表单提交。为了解决这个限制，我们需要区分窗口关闭和其他导航事件。

一种方法是利用以下 jQuery 代码排除表单提交和超链接（排除其他框架中的提交和超链接）：

var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });

$(window).on("beforeunload", function() {
    return inFormOrLink ? "Do you really want to close?" : null;
})

在此代码中，我们通过将相关操作的 inFormOrLink 变量设置为 true 来跟踪用户当前是否正在与表单或链接进行交互。在“beforeunload”事件期间，仅当用户当前不在表单或链接中时，我们才会显示确认提示。

请注意，如果另一个事件处理程序取消提交或导航，此方法可能会遇到问题，从而可能阻止即使窗口关闭，也不会显示确认提示。为了缓解这个问题，请考虑记录提交和点击事件的时间，并验证“beforeunload”事件是否在几秒钟后发生。

以上是如何在 JavaScript 中可靠地仅检测浏览器窗口关闭事件？的详细内容。更多信息请关注PHP中文网其他相关文章！