原生JavaScript实现表单离开时自定义Bootstrap确认模态框

问题背景 #

当用户填写表单后，点击页面内菜单、刷新页面或使用浏览器返回按钮时，需要触发自定义Bootstrap模态框提示未保存数据可能丢失，用户可选择确认离开或取消导航。尝试使用beforeunload事件实现，但存在两个问题：

• 事件触发后直接卸载页面，不等待模态框的用户确认操作
• 调用e.preventDefault()会触发浏览器默认弹窗，无法使用自定义模态框提升体验

问题分析 #

1. 事件绑定错误：你当前绑定的是unload事件，该事件在页面已经开始卸载时触发，完全无法阻止页面离开；正确应该使用beforeunload事件，但该事件受浏览器安全限制：无法异步等待用户交互（比如模态框确认），且强制触发默认弹窗（即使调用preventDefault）。
2. 两种导航场景差异：页面内的菜单点击属于可拦截的DOM事件，可完全自定义处理；而浏览器刷新、返回属于浏览器级操作，受限于beforeunload的规则，无法完全用自定义模态框替代。

分步解决方案 #

1. 拦截页面内的导航操作 #

针对页面内的菜单链接、带跳转逻辑的按钮等元素，添加点击事件监听，判断表单是否有未保存数据，若有则阻止默认跳转，显示自定义模态框，根据用户选择决定是否继续导航。

2. 处理浏览器级操作（刷新/返回） #

由于浏览器安全限制，beforeunload无法显示自定义模态框，只能触发浏览器默认提示。我们可以在表单有未保存数据时，设置returnValue触发默认提示，同时保持页面内导航的自定义模态框体验。

完整代码实现 #

// 标记表单是否有未保存数据
let hasUnsavedChanges = false;

// 监听表单元素变化，实时更新未保存状态
document.getElementById('role_name').addEventListener('input', () => {
  hasUnsavedChanges = true;
});
document.querySelectorAll('.js-role-input').forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    hasUnsavedChanges = true;
  });
});

// 拦截页面内所有导航元素（可根据实际需求选择目标元素）
document.querySelectorAll('a.nav-link, button[data-href]').forEach(el => {
  el.addEventListener('click', function(e) {
    if (hasUnsavedChanges) {
      e.preventDefault();
      const targetUrl = this.href || this.dataset.href;
      const discardModal = new bootstrap.Modal(document.getElementById('discardConfirmation'));
      
      // 绑定模态框按钮逻辑
      document.getElementById('confirm-discard').onclick = () => {
        hasUnsavedChanges = false;
        discardModal.hide();
        window.location.href = targetUrl;
      };
      document.getElementById('cancel-discard').onclick = () => {
        discardModal.hide();
      };
      
      discardModal.show();
    }
  });
});

// 处理浏览器刷新/返回操作
window.addEventListener('beforeunload', function(e) {
  if (hasUnsavedChanges) {
    // 触发浏览器默认提示，这是该场景下的唯一合规方案
    e.returnValue = '你有未保存的更改，离开后数据将丢失。';
    return '你有未保存的更改，离开后数据将丢失。';
  }
});

配套模态框HTML示例 #

<div class="modal fade" id="discardConfirmation" tabindex="-1" aria-labelledby="discardLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="discardLabel">确认离开</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        你有未保存的更改，离开后数据将丢失，确定要继续吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="cancel-discard" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger" id="confirm-discard">确认离开</button>
      </div>
    </div>
  </div>
</div>

关键说明 #

• 表单状态跟踪：通过监听表单元素的input和change事件，实时更新未保存状态，避免重复判断表单内容，提升性能。
• 页面内导航拦截：针对所有导航元素添加监听，阻止默认行为后显示模态框，用户确认后再执行跳转逻辑。
• 浏览器级操作限制：由于浏览器安全策略，刷新和返回操作无法使用自定义模态框，只能依赖beforeunload的默认提示，这是所有浏览器的统一限制，无法绕过。

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