页面离开确认弹窗Bug修复及Laravel Livewire适配方案咨询

问题1：表单提交时触发弹窗导致重复提交 #

核心思路是标记表单提交状态，让页面离开事件识别到当前是正常提交操作，跳过弹窗。同时处理提交失败后的状态重置，避免后续误判。

实现逻辑： #

1. 初始化状态变量，标记是否正在提交表单
2. 监听表单提交事件，设置提交状态
3. 修改页面离开事件，判断提交状态后决定是否弹窗
4. 配合Livewire提交完成事件，重置未跳转场景下的状态

问题2：Livewire按钮误触发弹窗 #

Livewire的AJAX操作不会触发页面卸载，但如果弹窗逻辑未区分常规操作与Livewire操作，就会误触发。解决方案是标记Livewire操作状态，让页面离开事件跳过这类操作。

实现逻辑： #

1. 初始化Livewire操作状态变量
2. 监听Livewire的点击/提交事件，设置操作状态
3. 短暂延迟后重置状态，避免影响后续的页面离开判断
4. 增加未保存内容判断，只有当表单确实有修改时才触发弹窗

完整脚本示例 #

// 状态变量
let isSubmitting = false;
let isLivewireAction = false;
let originalFormValues = {};

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form');
  if (form) {
    // 保存表单初始值，用于判断是否有未修改内容
    originalFormValues = getFormValues(form);
  }

  // 监听常规表单提交
  form?.addEventListener('submit', () => {
    isSubmitting = true;
  });

  // 监听Livewire提交事件
  document.addEventListener('livewire:submit', () => {
    isSubmitting = true;
  });

  // Livewire操作完成后重置状态（比如验证失败未跳转页面）
  document.addEventListener('livewire:finished', function() {
    if (window.location.href === window.originalHref) {
      isSubmitting = false;
      // 更新表单初始值，适配Livewire已保存的内容
      const form = document.querySelector('form');
      if (form) originalFormValues = getFormValues(form);
    }
  });

  // 监听Livewire元素点击
  document.addEventListener('livewire:click', () => {
    isLivewireAction = true;
    // 短暂延迟后重置，避免影响后续页面离开判断
    setTimeout(() => isLivewireAction = false, 150);
  });
});

// 页面离开事件处理
window.addEventListener('beforeunload', function(e) {
  // 跳过表单提交或Livewire操作场景
  if (isSubmitting || isLivewireAction) return;

  // 检查是否有未保存的表单修改
  const form = document.querySelector('form');
  if (!form) return;
  const currentValues = getFormValues(form);
  const hasUnsavedChanges = !isEqual(originalFormValues, currentValues);

  if (!hasUnsavedChanges) return;

  // 触发确认弹窗
  const message = '你确定要离开吗？未保存的内容将会丢失。';
  e.returnValue = message;
  return message;
});

// 辅助函数：获取表单所有输入字段的值
function getFormValues(form) {
  const values = {};
  form.querySelectorAll('input, textarea, select').forEach(input => {
    values[input.name] = input.value;
  });
  return values;
}

// 辅助函数：比较两个对象是否相等（用于判断表单是否修改）
function isEqual(obj1, obj2) {
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}

关键说明 #

• 表单提交时通过isSubmitting状态直接跳过弹窗，避免用户提交时触发确认框，从根源解决重复提交问题
• Livewire操作通过livewire:click事件标记状态，确保AJAX操作不会误触发弹窗
• 增加未保存内容判断，只有当表单确实有修改时才触发弹窗，减少不必要的干扰

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