我想在重置已经使用的样式之前添加窗口警报吗

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

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

此外，Swal返回一个处理结果的promise。下面的内容与这里的示例非常接近。

我建议：

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>

Answer 2

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

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');
});