创建类似于beforeUnload的JavaScript函数，单击“链接”以显示自定义“确认”对话框时触发该函数

Question

在我使用JavaScript的应用程序中，如果用户在保存数据之前尝试离开页面，则会显示典型的警报消息。

这是使用beforeunload事件完成的。 此事件仅允许您更改和设置自定义文本，仅此而已。 我读到有些浏览器甚至不允许使用自定义文本！

所以无论如何在我的应用程序中，我现在有一个看上去很好看的Dialog窗口，当我需要用户确认某些内容时，我会在整个应用程序中使用它。

理想情况下，当用户尝试使用未保存的更改离开页面时，我希望显示自定义对话框。 我甚至可以在对话框中找到我的AJAX保存按钮，供用户从那里保存！

我们知道这似乎是不可能的，似乎使用了beforeunload事件。

所以我提出了另一个计划，而不是简单地放弃并说它不可能就像每个StackOverflow问题和关于此事的博客帖子所说的那样，我更愿意冒险过去，因为我知道它可以完成！

我知道如何做到这一点，然后在我的想法来了之后，我找到了一个实际已经做到的网站！ Facebook的

所以在我的应用程序中，我有一个全局JavaScript变量var unsavedChanges = false; 现在，只要在页面上对表单字段进行了更改，并且我所说的操作构成了“更改”，那么我将设置var unsavedChanges = true; 当这些项目发生时。

unsavedChanges是我决定显示或不显示我的beforeunload事件警报的方法。

因此，使用这个相同的变量，而不是简单地显示beforeunload事件警报，我想在另一个事件中使用它。

我想在我的所有链接上设置click事件。 因此，只要在我的应用程序中单击链接，它将检查unsavedChanges ，如果为true ，我将显示我自己的自定义jQuery对话框窗口。 它内部会有一个Save按钮来保存内容，一个按钮可以取消，一个按钮可以继续到达所需的目的地。 还应该设置unsavedChanges到false ，希望这将阻止window.beforeunload事件直接烧成后。

现在我提到Facebook似乎完全按照我刚刚概述的那样做，或者至少在Messages页面上非常相似。

通过链接单击退出

以下是点击LINK时的操作截图....

通过非链接点击退出

现在当你绕过链接点击并尝试关闭窗口或在地址栏中输入一个新的URL，基本上任何其他类型的页面退出不是链接点击，它然后回beforeunload事件的默认浏览器行为

因此，如果你看看Facebook正在做什么，我上面所描述的似乎是可能的，似乎我概述的是一种可实现的方式。 显然你失去了Non-Link点击退出自定义Dialog支持，但它从来就不存在所以没有丢失，你在所有链接点击上添加了对它的支持，这太棒了！

现在我有了这个想法，但我不确切知道如何编码它100％工作，我需要帮助。

例如我不知道如何处理的一些问题......

• 如果单击了一个链接并且该链接上已经有一个click事件，那么我们如何使用这个新的click事件并使用现有的click事件？
• 某些链接可能无法保证此行为。 如果我有一个已经有点击事件的链接，并且该事件执行类似删除项目或将项目添加到页面的内容，那么它甚至不会尝试将页面放在首位，因此它不应显示对话框！ 因此，需要某种方式来设置链接以不具备此功能。 也许它默认情况下不能设置在没有链接的链接上。 <a href="">或<a href="#">或<a href="#targetName">这些显然应该没有点击事件！

所以现在这一点都是一个想法，我现在看到Facebook已经在某种程度上行动了！ 我很想听到更多的想法，想法，与此事有关的任何事情。 如果一个好的解决方案来自这个问题，这将成为一个非常好的博客文章，因为数百人似乎真的想要这个功能，我知道我已经多年了。

Answer 1

所以我们建立了非链接拦截你需要使用onbeforeunload，所以我甚至不会深入研究。 对于链接，您可以拦截click事件，然后评估位置对象以查看它在哪里。 根据这个做出决定。 对我来说，我认为主机，路径名和协议是要检查的。 如果需要，您可以检查所有这些。 如果其中任何一个不同，他们就会离开你。

更改jQuery选择器，因为它会忽略某些链接。

// Just going to assume this is true for arguments sake.
var unsavedChanges = true;

$('a').click(function () {
    // Properties to compare between link and current location
    // https://developer.mozilla.org/en-US/docs/Web/API/Location
    var toCheck = ['host', 'pathname', 'protocol'];
    var toCheckL = toCheck.length;

    return function (e) {
        // Skip this if there's no changes
        if (!unsavedChanges) return true;

        // Just to be sure
        if (this.constructor !== HTMLAnchorElement) {
            return true;
        }

        // Start off assuming they want to stay
        // because we can't stand being left again        
        var staying = true;

        for (var i = 0; i < toCheckL; i++) {
            var arg = toCheck[i];

            if ( this[arg] !== window.location[arg] ) {
                // If anything doesn't match, just move on and let her go
                staying = false;
                break;
            }
        }

        if ( !staying ) {
            // Do whatever you want here
            // Return false to stop the link
            // Recommend you reference this.href if you
            // decide to let them leave after all
            alert("Blocked");
            return false;
        }

        alert("Baby come back...");
    };
}());

http://jsfiddle.net/dt502efv/