javascript - 缩小先于卸载，仅在更改或更新字段时触发

我试图弄清楚如何限制窗体上的beforeunload命令。我已经能够弄清楚如何取消绑定beforeunload命令，然后当我离开该表单导航时。但是，无论是否更改了表格，每次都会进行卸载。我试图弄清楚如何使beforeunload仅在表单实际上已更新或更改时才触发。如果用户单击浏览器上的“后退”按钮，则不会触发beforeunload。太棒了。但是，如果用户单击“表单”上的链接，则会弹出beforeunload提示。这是设计的吗？也许我应该采取不同的方法？我是新手。所以我愿意提出建议。

我已通读了MDN链接，该链接解释了beforeunload ... https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
并且似乎无法弄清楚如何将beforeunload范围缩小到仅当表单上的字段已更改时。

   $('form').submit(function() {
   $(window).unbind('beforeunload');
    });
   $(window).on('beforeunload',function(){
   return '';
    });

我试图弄清楚如何更改上面的代码，以便仅当用户离开该页面导航时，表单上的字段发生更改时，才会触发beforeunload。如果弹出窗口询问是否单击或更改任何内容，是否要离开页面，这会使用户感到困惑。

最佳答案

这样的东西。
我们签出简单表格，仅在有值时提示用户。

提交时添加了变量集，这使我们可以绕过onunload测试。

var submitting = false;

window.addEventListener("beforeunload", function (event) {
  console.log('checking form');

  let inputValue = document.querySelector('#myInput').value;
  if(inputValue.length > 0 && submitting === false) {
    console.log(inputValue);
    event.returnValue = 'Are you sure you wish to leave?';
  }

  event.preventDefault();

});

document.addEventListener("submit", function(event) {
  submitting = true;
});

<form submit="somewhere.htm">
  <input id="myInput" type="text" />
  <input type="submit" value="Submit">
</form>
<a href="www.google.com">Test navigate away</a>