javascript - 更改类前触发事件

Question

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

在我们的应用程序中，“离开此页面”就像 <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" />

笔记

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

Answer 1

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

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

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