避免在用户主动点击保存按钮或提交表单时也收到离开页面的警告

自动摘要

正在生成中……

为了避免在用户主动点击保存按钮或提交表单时也收到警告，你可以在保存操作触发时暂时取消 beforeunload 事件处理程序，然后在保存操作完成后重新添加它。这可以通过 removeEventListener 和 addEventListener 方法来实现。以下是一个示例代码：

// 获取编辑器实例
var editor = editormd("editor", {
    // 配置选项
});

// 用于跟踪用户是否进行了编辑
var isContentEdited = false;

// 用于标记是否正在保存中
var isSaving = false;

// 监听编辑器内容变化事件
function contentChangeHandler() {
    isContentEdited = true;
    // 在这里你可以执行其他自定义操作
    // 例如：document.getElementById("unsaved-indicator").innerText = "内容已被编辑";

    // 移除change事件监听器，以确保只触发一次
    editor.off("change", contentChangeHandler);
}

editor.on("change", contentChangeHandler);

// 监听页面即将卸载事件
window.addEventListener("beforeunload", function(event) {
    if (isContentEdited && !isSaving) {
        // 如果用户进行了编辑且不是正在保存中，显示提示信息
        event.returnValue = "您的内容尚未保存，确定要离开页面吗?";
    }

    // 在这里你可以执行其他自定义操作，例如清除标记
    // 例如：document.getElementById("unsaved-indicator").innerText = "";
});

// 模拟保存操作
document.getElementById("save-button").addEventListener("click", function() {
    isSaving = true;

    // 执行保存操作，例如通过 AJAX 请求将内容发送到后台

    // 保存完成后，重新添加beforeunload事件监听器
    isSaving = false;
    editor.on("change", contentChangeHandler);
});

在上面的示例中，我们添加了一个新的标志 isSaving 来跟踪是否正在保存中。当用户点击保存按钮时，我们设置 isSaving 为 true，这会阻止 beforeunload 事件的触发。一旦保存完成，我们将 isSaving 设置回 false，然后重新添加 beforeunload 事件监听器，以便在用户编辑内容后再次触发警告。