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

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

这是使用

beforeunload

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

所以不管怎样，在我的应用程序中，我现在有了一个外观奇特的对话框窗口，当我需要用户确认某件事情时，我可以在整个应用程序中使用它

因此，理想情况下，我希望我的自定义对话框在用户试图离开带有未保存更改的页面时显示出来。我甚至可以在对话框中设置我的AJAX保存按钮，以便用户从中保存

正如我们所知，这似乎不可能使用

beforeunload

事件

所以我想出了另一个计划，而不是简单地放弃，说这是不可能的，就像每一个关于这件事的问题和博客帖子所做和说的那样，我宁愿冒险过去，因为我知道这是可以做到的

我有一个如何做到这一点的想法，然后我的想法来了，我发现一个网站，实际上已经做到了Facebook

因此，在我的应用程序中，我有一个全局JavaScript变量

var unsavedChanges=false现在，每当在页面上对我所说的构成“更改”的表单字段和操作进行更改时，我就会设置
var unsavedChanges=true当这些项目发生这种情况时

unsavedChanges
是我决定在卸载前显示或不显示我的
事件警报的方式

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

我想在我的所有链接上设置一个
点击
事件。因此，每当在我的应用程序中单击链接时，它都会检查
unsavedChanges
，如果
true
，我会显示自己的自定义jQuery对话框窗口。它里面有一个保存按钮来保存内容，还有一个取消按钮和一个继续到所需目的地的按钮。它还应该将
unsavedChanges
设置为
false
，这将有助于防止
窗口在卸载之前
事件之后直接触发

现在我提到，Facebook似乎和我刚才在留言页面上概述的完全一样，或者至少非常相似

单击链接退出
以下是点击链接时的屏幕截图


通过非链接单击退出
现在，当您绕过链接单击并尝试关闭窗口或在地址栏中输入新的URL时，基本上任何其他类型的页面退出都不是链接单击，然后它会返回到卸载前
事件的默认浏览器行为


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

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

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


如果一个链接被点击，并且该链接上已经有一个点击事件，那么我们如何使用这个新的点击事件以及现有的点击事件
某些链接可能无法保证这种行为。如果我有一个链接，上面已经有一个单击事件，并且该事件执行了类似于删除项目或向页面添加项目的操作，那么它甚至没有试图首先离开页面，因此它不应该显示对话框！因此，需要有某种方式来设置链接，使其不具有此功能。也可能默认情况下，它不能设置在没有链接的链接上
或
或
这些显然不应该有点击事件

所以这就是我现在看到的Facebook在某种程度上起作用的想法！我很想听到更多的想法，想法，任何与这件事有关的事情。这将是一个非常好的博客帖子，如果一个很好的解决方案从这个问题出来，因为数百人似乎真的想要这个功能，我知道我自己已经有很多年了。
所以我们已经建立了非链接拦截，你需要在卸载之前使用，所以我甚至不会深入讨论这个问题。对于链接，您可以截取单击事件，然后评估，以查看它将带您去哪里。在此基础上做出决定。对我来说，我认为主机、路径名和协议是需要检查的。如果你愿意，你可以检查所有的。如果有任何不同，他们就离开你

根据需要更改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...");
    };
}());

//为了参数起见，我们假设这是真的。
var unsavedChanges=true；
$（'a'）。单击（函数（）{
//要在链接和当前位置之间进行比较的属性
// https://developer.mozilla.org/en-US/docs/Web/API/Location
var-toCheck=[“主机”、“路径名”、“协议”]；
var toCheckL=toCheck.length；
返回函数（e）{
//如果没有更改，请跳过此项
如果（！unsavedChanges）返回true；
//只是想确定一下
if（this.constructor！==HtmlanchoreElement）{
返回true；
}
//假设他们想留下来就开始吧
//因为我们不能再忍受被遗弃
var=true；
对于（变量i=0；i