Question

我正在尝试为用户实施警告，以防他们离开表单而不保存。

警告对话框按预期工作，但唯一的例外是当用户选择“保持在页面上”时，选定的侧面菜单条目更改为用户单击的那个（表单是相同）。

如果用户选择“留在页面上”，如何确保仍然选择相同的菜单项？

var warnMessage = "Unsaved changes. Do you really want to leave the page?";
$(document).ready(function () {
   $('a.k-link').on('click', function () {
      window.onbeforeunload = function () {
          if (isDirty) return warnMessage;
      }
    });
});

Answer 1

您可能会发现使用确认提示更容易（并且可能在浏览器之间更加一致）（请记住，它是一个阻止对话框）。

<script>
    var warnMessage = "Unsaved changes. Do you really want to leave the page?";

   $('a.k-link').on('click', function (e) {
        if (isDirty && !confirm(warnMessage)) {     
            e.preventDefault();         
        }
    });
</script>

至少有两个理由可以避免onbeforeunload：

规范并不要求浏览器显示您的消息提供，not all browsers do和
正确的事件实际上是beforeunload

您可以并且应该通过window.addEventListener（）和beforeunload事件来处理此事件。那里有更多文档。 (MDN)

我只是在猜测，因为Kendo UI脚本阅读起来并不是很有趣，但是选择了＆＃39;因为导航事件已启动，即使您取消了它，也会应用类; Kendo脚本可能只是在听取成功的点击。 onbeforeunload和beforeunload都发生在点击事件解决后（AFAIK，无论如何）。

Answer 2

以下为我工作（添加e.stopPropagation）：

  $('a.k-link').on('click', function (e) {
      if (isDirty && !confirm(warnMessage)) {     
          e.preventDefault();
          e.stopPropagation();
      } });

或返回false：

  $('a.k-link').on('click', function (e) {
      if (isDirty && !confirm(warnMessage)) {     
          return false;
      } });

JQuery / dirty forms / window.onbeforeunload仅在链接选择后触发

2 个答案: