SweetAlert点击按钮无响应，页面刷新自动弹出问题求助

问题场景 #

点击按钮想触发SweetAlert弹窗，但按钮无任何反应，反而页面刷新时弹窗自动弹出，需求是仅在点击按钮时显示弹窗。

问题复现代码 #

JavaScript #

function successAlert()
Swal.fire(
   'saved!',   
   'success'
 )

CSS #

.show-example-btn {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

HTML #

<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">
<div class="showcase sweet">
      <button
        class="show-example-btn"
        aria-label="Show SweetAlert2 success message"
        onclick="successAlert()">
        save
      </button>
      <pre data-example-id="sweetAlert"></pre>
    </div>

问题原因 #

函数定义缺少大括号，导致Swal.fire语句未被包裹在函数体内。页面加载时，Swal.fire会被直接执行，所以自动弹出弹窗；而点击按钮时，successAlert因语法错误未正确定义，因此点击无响应。

修正后的代码 #

JavaScript #

function successAlert() {
  Swal.fire(
    'saved!',
    '',
    'success'
  )
}

补充说明：Swal.fire的标准参数格式为Swal.fire(title, text, icon)，这里补充了第二个可选参数（空字符串），确保参数传递符合SweetAlert2的要求。

HTML和CSS代码无需修改，保留原内容即可。修改后，只有点击按钮时才会调用successAlert函数触发弹窗，页面加载时不会自动弹出。

内容的提问来源于stack exchange，提问作者Saza.P