如何解决我想在重置我已经使用的样式之前添加一个窗口警报?
我在这里有一个带有简单 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 !",});
}
}
解决方法
如果您想在点击按钮之前向用户显示警报,您可以向按钮添加鼠标悬停事件。
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');
});
,
每个元素只能有一个 onclick
处理程序。所以在这里,第二个覆盖了第一个。
此外,Swal 返回一个承诺来处理结果。下面的内容与 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。