如何在点击Submit按钮时跳过页面未保存离开确认提示？

嘿，这个场景太常见啦！你只需要通过状态标志或者临时移除事件绑定的方式，就能让提交操作跳过确认提示，下面给你两种简单实用的方案：

方案一：使用状态标志位 #

这种方法通过一个全局变量标记当前是否处于提交状态，在卸载事件里判断这个状态来决定是否弹出提示：

<script language="JavaScript">
// 初始化提交状态为false
let isSubmitting = false;

// 绑定页面卸载前的确认事件
window.onbeforeunload = confirmExit;

function confirmExit() {
  // 如果是提交操作，直接返回null（不触发提示）
  if (isSubmitting) {
    return null;
  }
  return "Please click Update. Unsaved changes will be lost.";
}

// 给Submit按钮添加点击事件，标记为提交状态
document.querySelector('input[type="submit"]').addEventListener('click', function() {
  isSubmitting = true;
});
</script>

方案二：点击提交时移除事件绑定 #

这种方法更直接，在点击提交按钮时直接取消onbeforeunload事件的绑定，这样页面跳转时就不会触发提示了：

<script language="JavaScript">
function confirmExit() {
  return "Please click Update. Unsaved changes will be lost.";
}

// 绑定卸载提示事件
window.onbeforeunload = confirmExit;

// 点击Submit按钮时移除事件绑定
document.querySelector('input[type="submit"]').addEventListener('click', function() {
  window.onbeforeunload = null;
});
</script>

小提示 #

• 如果你的提交按钮有专属ID（比如id="submitBtn"），可以把document.querySelector('input[type="submit"]')换成document.getElementById('submitBtn')，定位更精准。
• 也可以监听表单的submit事件来实现同样的效果，适合有多个提交按钮的场景：

  document.querySelector('form').addEventListener('submit', function() {
    isSubmitting = true; // 或者 window.onbeforeunload = null;
  });
  

内容的提问来源于stack exchange，提问作者Afan