如何实现SweetAlert2弹窗未保存时点击关闭按钮不直接关闭？

你的问题出在直接监听关闭按钮的点击事件无法完全拦截SweetAlert2的内部关闭流程，应该使用SweetAlert2官方提供的beforeClose钩子来实现拦截逻辑，这是专门用于在弹窗关闭前执行校验或确认的回调。

解决方案步骤： #

• 移除原有的关闭按钮监听代码，因为beforeClose会覆盖所有关闭场景（包括点击关闭按钮、点击遮罩、按ESC键），更全面可靠。
• 在初始化SweetAlert2时配置beforeClose钩子，利用异步回调等待用户的确认结果，再决定是否允许关闭弹窗。

具体代码示例： #

// 初始化SweetAlert2弹窗时添加beforeClose配置
Swal.fire({
  title: '编辑模板',
  html: `<!-- 你的模板编辑内容 -->
         <button id="saveTemplateButton" ${/* 根据保存状态设置disabled */}>保存模板</button>`,
  // 其他配置项...
  beforeClose: async (dialog) => {
    const saveButton = dialog.querySelector("#saveTemplateButton");
    // 判断是否存在未保存的更改（以saveButton是否禁用为判断条件）
    if (!saveButton.disabled) {
      // 先显示加载状态，避免用户重复操作
      Swal.showLoading();
      // 等待用户确认是否放弃保存
      const shouldClose = await this.continueWithoutSavingChanges();
      Swal.hideLoading();
      // 返回false阻止关闭，返回true允许关闭
      return shouldClose;
    }
    // 无未保存更改，允许关闭
    return true;
  }
});

// 确认弹窗的实现示例（确保返回Promise）
continueWithoutSavingChanges() {
  return Swal.fire({
    title: '确认放弃？',
    text: '你有未保存的模板更改，确定要放弃吗？',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: '是的，放弃',
    cancelButtonText: '取消',
    // 禁止点击遮罩关闭确认弹窗
    allowOutsideClick: false
  }).then(result => {
    // 用户点击确认则返回true，允许关闭原弹窗；否则返回false
    return result.isConfirmed;
  });
}

为什么原代码无效？ #

原代码直接监听.swal2-close按钮的click事件，虽然调用了event.preventDefault()和stopPropagation()，但无法阻止SweetAlert2内部绑定的关闭逻辑——组件本身会在按钮点击后触发关闭流程，而异步的await this.continueWithoutSavingChanges()还没等到用户选择，弹窗已经开始关闭了。

而beforeClose是SweetAlert2官方提供的拦截点，只要在回调中返回false就能直接阻止关闭，异步函数也会等待Promise完成后再决定是否关闭，完全符合你的需求。

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