我想在重置已使用的样式之前添加 window 警报？

Question

我这里有一个简单的按钮 CSS。我想要的是，当我点击那个按钮来重置我的风格时。我用了，我需要在按下按钮之前添加一个甜蜜的提醒。

<button class="reset-option">Reset Options</button>

document.querySelector(".reset-option").onclick = function () {

  localStorage.clear();
  window.location.reload();
};

我想要的是，添加此警报以javascript处理它。

swal({
  title: "OOPS !",
  text: "You Want To Resat Your Style!",
  icon: "warning",
});

我尝试这样做，但没有成功。

let resetOption = document.querySelector(".reset-option");

resetOption.onclick = function () {

  if (resetOption.window === reload()) {
    swal({
      title: "OOPS !",
      text: "You Want To Resat Your Style!",
      icon: "warning",
    });
  }
}

Answer 1

如果您想在点击按钮之前向用户显示警告，您可以将鼠标悬停事件添加到您的按钮。

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});
document.querySelector(".reset-option").onclick = function () {

  localStorage.clear();
  window.location.reload();
 
};
var cc=document.querySelector(".reset-option") 
cc.addEventListener('mouseover', function() {
     //your alert code here
     alert('Before hit button');
});

Answer 2

每个元素只能有一个 onclick 处理程序。所以在这里，第二个覆盖第一个。

此外，Swal returns 承诺处理结果。下面的内容与找到的示例非常接近 here.

我建议：

document.querySelector(".reset-option").onclick = function () {
  
  swal.fire({
    title: "OOPS !",
    text: "You Want To Resat Your Style!",
    icon: "warning",
    showCancelButton: true
  }).then((result) => {
    if (result.isConfirmed) {
      console.log("confirmed");
      //localStorage.clear();
      //window.location.reload();
    }else{
      console.log("canceled")
    }
  })
    
  
};

<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.12.5/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.12.5/sweetalert2.min.js"></script>

<button class="reset-option">Reset Options</button>

我想在重置已使用的样式之前添加 window 警报？

I want add a window Alert before I reset the style I already use?

html

javascript

css

sass

sweetalert