Javascript 更改类之前的触发器事件

有许多按钮和链接可以让我退出一个页面。在将此页面转到其他页面之前，我想向用户询问一些问题，然后，退出此页面

在我们的应用程序中，“离开此页面”就像

到

并显示另一个画布。其他人也这样做了。我的目标是检测是否删除了

class=“show”

我读过，等等。我还很年轻，不明白他们真正的意思，或者只是不知道如何在我的问题中实现它

请提供帮助，下面是更具体的示例列表：

$（'body'）。在（'class\u change\u event'，（）=>{
游泳({
标题：“你确定吗？”，
text:“如果关闭而不保存，则将放弃所做的更改。”，
键入：“警告”，
showCancelButton:true，
confirmButtonText：“保存”
})
//用户选择后，执行原始作业
})

div.demo{
边框：1px纯黑；
}

---

如果要阻止用户离开页面，则需要使用

beforeunload

事件。这将导致浏览器提示用户是否确实要离开页面。但是，如果您使用的是SPA，则需要与框架的路由相关联，以便在框架更改路由时显示提示

window.addEventListener("beforeunload", function(e) { ... });

---

如果要阻止用户离开页面，请使用

beforeunload

事件。这将导致浏览器提示用户是否确实要离开页面。但是，如果您使用的是SPA，则需要与框架的路由相关联，以便在框架更改路由时显示提示

window.addEventListener("beforeunload", function(e) { ... });

---

好的。我抓到你了。我想这就是你需要的。我们创建的观察者就是外观 对于目标元素中的类更改。在类为的所有元素中加载。请参阅脚本中的注释

let view=[…document.querySelectorAll（“.load”）；
视图。forEach（视图=>{
//创建一个将查找类更改的观察者实例
var观察者=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
//我们只需要检测类的变化
if（mutation.attributeName！==“class”）{
返回false；
}
//已更改类列表的确切节点
设el=突变。目标
if（el.classList.contains（“show”））{
确认离开（）；
}
});
});
//观察者的配置。我们需要检测“类”属性的变化
变量配置={
属性：true
};
//传入目标节点以及观察者选项
observer.observe（视图，配置）；
})
//让我们测试一下我们的观察者
设置超时（（）=>{
document.querySelector（'.load'）.classList.add（'show'））
}, 2000)
函数confirmLeave（）{
//此字符串仅用于检查并显示您可以稍后删除它并使用下面的脚本
document.querySelector（'.text'）.textContent='元素得到了“show”class！'；
/*游泳({
标题：“你确定吗？”，
text:“如果关闭而不保存，则将放弃所做的更改。”，
键入：“警告”，
showCancelButton:true，
confirmButtonText：“保存”
})*/
}

.load{
宽度：20px；
高度：20px；
边框：1px实心#333；
}
.load.show{
背景色：红色；
}
.文本{
边缘顶部：10px；
}

---

好的。我抓到你了。我想这就是你需要的。我们创建的观察者就是外观 对于目标元素中的类更改。在类为的所有元素中加载。请参阅脚本中的注释

let view=[…document.querySelectorAll（“.load”）；
视图。forEach（视图=>{
//创建一个将查找类更改的观察者实例
var观察者=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
//我们只需要检测类的变化
if（mutation.attributeName！==“class”）{
返回false；
}
//已更改类列表的确切节点
设el=突变。目标
if（el.classList.contains（“show”））{
确认离开（）；
}
});
});
//观察者的配置。我们需要检测“类”属性的变化
变量配置={
属性：true
};
//传入目标节点以及观察者选项
observer.observe（视图，配置）；
})
//让我们测试一下我们的观察者
设置超时（（）=>{
document.querySelector（'.load'）.classList.add（'show'））
}, 2000)
函数confirmLeave（）{
//此字符串仅用于检查并显示您可以稍后删除它并使用下面的脚本
document.querySelector（'.text'）.textContent='元素得到了“show”class！'；
/*游泳({
标题：“你确定吗？”，
text:“如果关闭而不保存，则将放弃所做的更改。”，
键入：“警告”，
showCancelButton:true，
confirmButtonText：“保存”
})*/
}

.load{
宽度：20px；
高度：20px；
边框：1px实心#333；
}
.load.show{
背景色：红色；
}
.文本{
边缘顶部：10px；
}

你的意思是像弹出的对话框一样，上面写着

你真的想离开而不保存你的更改吗？

当你正在编辑某些内容并试图结束时？你链接的问题的公认答案是旧的。在相同的问题中使用突变，看看更新的答案。@Jodast YES！对于原始目标，如果用户回答“确定”（是），它将保存画布，并且“是”或“否”都将切换到另一个画布（这意味着将类切换到另一个画布）你的意思是像一个弹出的对话框，上面写着“你真的想离开而不保存你的更改吗？”当你编辑一些东西并试图结束时？你链接的问题的公认答案是旧的。在相同的问题中使用突变，看看更新的答案。@Jodast YES！对于原始目标，如果用户回答OK（是），它将保存画布，并且YES或NO都将切换到另一个画布（其中m