如何防止Sweet Alert弹窗触发时URL自动追加#号？

使用1.x版本SweetAlert时触发弹窗URL自动追加#，是组件本身的实现问题：弹窗内的确认、取消按钮默认用带href="#"属性的<a>标签渲染，组件没有给按钮绑定阻止默认行为的逻辑，点击按钮甚至弹窗触发渲染时，就会触发浏览器默认的锚点跳转，往URL尾部拼上#，部分场景还会导致页面自动滚回顶部。

• 适配现有代码的快速修复
  不需要改动组件版本，只需要在原有swal()调用代码的后面，追加一行history API的代码，直接清掉自动加上的#即可，完全不影响原有弹窗逻辑：

  swal({
      title: "Are you sure?",
      text: "You won't be able to revert this!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#62cb31",
      confirmButtonText: "Yes, delete it!",
      cancelButtonText: "Cancel",
      cancelButtonColor: "#DD6B55",
      closeOnConfirm: false,
      closeOnCancel: true,                
  }, function(isConfirm) {
      // 这里写原有的确认、取消业务逻辑
  })
  // 追加以下代码即可清除自动追加的#
  history.replaceState(null, document.title, window.location.pathname + window.location.search)
  

  如果要兼容不支持history API的老旧浏览器，可以等弹窗渲染完成后，给弹窗内的所有按钮绑定阻止默认跳转的事件：

  setTimeout(() => {
      document.querySelectorAll('.swal-modal .swal-button').forEach(btn => {
          btn.addEventListener('click', e => e.preventDefault())
      })
  }, 0)
  

• 根源修复方案
  1.x版本的SweetAlert已经停止维护，官方后续推出的SweetAlert2重写了组件实现，弹窗按钮全部用原生<button>标签渲染，从根源上解决了锚点跳转的问题。两个版本的配置项兼容性很高，迁移只需要把全局调用名从swal换成Swal.fire即可，还能用到很多新增功能。
• 本地源码修改方案（不推荐）
  如果既不方便升级组件，也不想加额外逻辑，可以直接打开本地引入的sweetalert.js源文件，搜索所有href="#"的代码片段，要么把对应的<a>标签替换成<button>标签，要么在按钮的点击回调里加上e.preventDefault()阻止默认跳转，保存后刷新页面即可生效。

内容的提问来源于stack exchange，提问作者Prabhat-VS