如何捕获浏览器窗口关闭事件而不干扰表单提交？

在没有表单干扰的情况下捕获浏览器窗口关闭事件

通常希望在浏览器窗口（或选项卡）关闭时专门触发一个事件。然而，通常用于此目的的 beforeunload 事件也会对表单提交做出反应。我们如何排除与表单相关的操作触发此事件？

答案：

每当用户离开当前页面时，无论出于何种原因，都会触发 beforeunload 事件。这包括表单提交、链接点击和直接导航到另一个页面。要排除这些操作，我们可以利用以下代码：

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; 
})

或者，如果使用 1.7 之前的 jQuery 版本，建议使用以下代码：

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

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

在此解决方案中，当用户单击超链接或提交表单，则 inFormOrLink 标志设置为 true。在 beforeunload 事件期间，会检查此标志，如果为 false，则不会捕获该事件。

重要提示：

值得注意的是，其他事件处理程序可能会防止发生表单提交或导航。在这种情况下，窗口关闭时 beforeunload 事件仍会触发，从而导致确认提示丢失。为了缓解这种情况，记录点击和提交事件的时间，并检查 beforeunload 是否发生得晚得多，以便处理此类情况。

以上是如何捕获浏览器窗口关闭事件而不干扰表单提交？的详细内容。更多信息请关注PHP中文网其他相关文章！