javascript - 停止页面导航并等待用户确认

Question

我允许用户在表单字段中进行一些更改，并且根据用户是否进行了一些更改，我启用了“提交更改”按钮。

我想添加一个功能，让用户确认他想导航到其他页面而不提交他所做的更改。我已经添加了代码来显示一个对话框，但问题是该对话框只显示一小段时间，然后页面导航移动到另一个页面。我的代码是:

        window.onbeforeunload = function() {
            if(!dijit.byId('editBtn').get('disabled')) {
                discardChanges(
                        'Pending Unsaved Changes',
                        'You have pending unsaved changes. Do you really want to discard them?',
                        'Discard Changes',
                        function() {
                            return true;
                        },
                        function() {
                            return false;
                        },
                        300,
                        700);
            }
        }

如何阻止浏览器移动到其他页面并等待用户单击对话框上的按钮，然后决定是否放弃单击。对话框如下所示:

Answer 1

使用事件 window.onbeforeunload ，当页面卸载并返回字符串时触发 “您有待处理的未保存更改。您真的要丢弃它们吗？”

浏览器显示原生对话框:

这是 AFAIK 停止导航的唯一方法。

jsFiddle:http://jsfiddle.net/phusick/R6EJ3/show/light/