gpt4 book ai didi

javascript - 更改类前触发事件

转载 作者:太空宇宙 更新时间:2023-11-04 00:54:20 25 4
gpt4 key购买 nike

有许多按钮和链接可以让我退出一页。在将此页面留给另一个页面之前,我想问用户一些事情,然后退出此页面。

在我们的应用程序中,“离开此页面”就像 <canvas class="show"></canvas><canvas class=""></canvas>并显示另一个 Canvas 。其他人已经这样做了。我的目标是检测是否 class="show"是否被移除。

我已阅读 this , this , 等等。我还很初级,不明白他们的真正意思,或者只是不知道如何在我的问题中实现它。

请帮助,下面是更具体的示例列表:

$('body').on('class_change_event', () => {
swal({
title: "Are you sure?",
text: 'If you close without saving, your changes will discarded.',
type: "warning",
showCancelButton: true,
confirmButtonText: "Save"
})
// After the user choose, do the original jobs
})
div.demo { 
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<div class="demo">
<canvas class="load show"></canvas>
<canvas class="load"></canvas>
<canvas class="load"></canvas>
</div>

<a href="https://www.google.com">go to Google</a>
<a href="index.html">back to index</a>
<input type="button" value="Clear canvas" />

笔记
  • 即使用户点击 buttona会导致class="show"改变了。
  • 我不确定将事件附加到 $('body') 上是否正确

最佳答案

如果你想阻止用户离开页面,你想使用 beforeunload 事件。如果用户真的想离开页面,这将导致浏览器提示用户。但是,如果您使用的是 SPA,则需要绑定(bind)到框架的路由以在它更改路由时显示提示。

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

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

关于javascript - 更改类前触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55153942/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com