用户取消离开时保持页面不刷新，及离开确认后跳转失效问题

嘿，我来帮你搞定这个问题！你目前遇到的两个核心困扰：一是取消离开操作后页面不该刷新，二是点击Leave按钮确认后无法跳转至leave.php，其实根源是没区分「表单提交」和「主动点击Leave按钮离开」这两种场景，而且Leave按钮的跳转逻辑被错误拦截了。下面是具体的解决步骤和完整代码：

一、核心问题拆解 #

• 默认的beforeunload事件会拦截所有页面卸载行为（包括表单提交、刷新页面、点击跳转按钮），这会导致表单提交时也弹出不必要的确认框，同时如果Leave按钮的跳转逻辑没处理好，就会出现确认后跳不动的情况。
• 我们需要给Leave按钮单独绑定确认逻辑，同时让表单提交时跳过全局的离开确认。

二、完整代码实现 #

HTML 结构（test.php） #

先把页面元素整理好，给按钮和表单加上ID方便JS获取：

<form id="userForm" action="your-controller-url" method="post">
  <!-- 你的表单字段，比如示例输入框 -->
  <input type="text" name="userInfo" placeholder="填写内容...">
  <button type="submit" id="submitBtn">Submit</button>
</form>

<button id="leaveBtn">Leave</button>

JavaScript 逻辑 #

这段代码会精准区分不同场景，解决你的两个问题：

// 标记：是否正在提交表单（用于跳过全局离开确认）
let isSubmittingForm = false;

// 表单提交时，设置标记为true，告诉全局事件不需要拦截
document.getElementById('userForm').addEventListener('submit', () => {
  isSubmittingForm = true;
});

// 全局页面卸载前的确认（仅当不是表单提交时触发）
window.addEventListener('beforeunload', (e) => {
  if (!isSubmittingForm) {
    // 提示文本：不同浏览器会有统一规范显示，自定义文本可能不生效
    const tipMessage = '确定要离开吗？未保存的内容会丢失哦。';
    e.returnValue = tipMessage;
    return tipMessage;
  }
});

// Leave按钮的单独点击处理逻辑
document.getElementById('leaveBtn').addEventListener('click', () => {
  // 弹出确认框
  const wantLeave = confirm('确定要离开吗？无需填写表单即可跳转至leave.php');
  
  if (wantLeave) {
    // 用户确认后，直接跳转，不会被全局beforeunload拦截
    window.location.href = 'leave.php';
  }
  // 用户取消的话，什么都不做，页面自然保持当前状态，不会刷新
});

三、关键细节说明 #

• 表单提交不弹确认框：通过isSubmittingForm这个标记，当用户点击Submit时，标记设为true，全局的beforeunload事件就会跳过确认，不影响Controller的正常处理流程。
• Leave按钮确认后正常跳转：单独给Leave按钮绑定点击事件，用原生confirm()弹出确认框，确认后直接用window.location.href跳转，完全避开全局事件的干扰，不会出现跳不动的情况。
• 取消离开后页面不刷新：用户取消确认时，我们不执行任何跳转或刷新操作，页面自然会保持当前的表单状态和内容，不需要额外处理。

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