Sweetalert2如何检测Cancel按钮 点击取消/弹窗外不触发Ajax及错误提示

核心原因是 SweetAlert2 的then回调会在弹窗关闭时触发，不管是点击确认、取消还是关闭弹窗都会进入该回调，你需要对回调的返回结果做判断后再执行对应逻辑。

核心修改点 #

• then回调接收的result对象包含用户操作的状态标识，仅当result.isConfirmed为true时代表用户点击了确认按钮，此时再执行后续的错误提示逻辑即可。
• 你原有代码中放在preConfirm内的Ajax逻辑本身就仅会在用户点击确认按钮时执行，天然不会在取消/关闭弹窗场景触发，无需额外调整。

修改后完整代码 #

$(function() {
  $('.user-details').click(function(e) {
    e.preventDefault();
    Swal.fire({
      title: 'Are you sure?',
      text: '',
      icon: 'question',
      showCancelButton: true,
      showLoaderOnConfirm: true,
      reverseButtons: true,
      preConfirm: function() {
        console.log('AJAX request');
        return new Promise(function(resolve, reject) {
          setTimeout(function() {
            resolve();
          }, 1200);
        });
      },
    }).then(function(result) {
      // 仅点击确认按钮时执行后续逻辑
      if (result.isConfirmed) {
        Swal.fire({
          title: 'Error!',
          text: 'I want to show this, only after clicking OK!',
          icon: 'error',
          showCancelButton: false,
          showLoaderOnConfirm: false,
        });
      }
    });
  });
});

HTML代码无需调整。
修改后点击取消按钮、点击模态框外部、按ESC关闭弹窗时都会直接关闭窗口，不会执行Ajax逻辑也不会弹出错误提示。

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