javascript - MVC3 阻止导航离开页面

Question

当单击页面上的链接时，如何防止页面不导航。我有下面的代码，但它反而显示了两次消息。该页面还有一个数据网格。只有当我通过单击网格上的记录离开页面时，才会显示两次弹出消息。其他地方都很好。

   var canShowWarning = "@(Model.CanEdit)";
var showWarning = false;

window.onbeforeunload = function () {
    if (canShowWarning && showWarning) {
        return 'You have made unsaved changes';
    }
}
$(function () {
$("#Form").submit(function () {
        showWarning = false;
    });

    $("#Form").change(function () {
        showWarning = true;
    });
});

Answer 1

var canShowWarning = "@(Model.CanEdit)";
var showWarning = false;
var alreadyShown = false;

window.onbeforeunload = function () {
    if (canShowWarning && showWarning && !alreadyShown) {
        alreadyShown = true;
        return 'You have made unsaved changes';
    }
}
$(function () {
$("#Form").submit(function () {
        showWarning = false;
    });

    $("#Form").change(function () {
        showWarning = true;
        alreadyShown =  false;
    });
});