javascript - 如果尚未保存更改，请在离开网页之前警告用户

当寻找一种方法来警告用户（如果尚未保存更改）在离开网页之前发出警告时，我发现了以下解决方案：https://stackoverflow.com/a/48238659/9512437，但是即使用户按下了保存按钮，也会弹出警告。我尝试在用户单击“提交”按钮时设置一个事件，以设置一个变量以防止警告显示，但是现在警告从未显示。

这是我尝试过的：

<script>
    "use strict";
    var btn_click = false;

    (() => {
    const modified_inputs = new Set;
    const defaultValue = "defaultValue";
    // store default values
    addEventListener("beforeinput", (evt) => {
        const target = evt.target;
        if (!(defaultValue in target || defaultValue in target.dataset)) {
            target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
        }
    });
    // detect input modifications
    addEventListener("input", (evt) => {
        const target = evt.target;
        let original;
        if (defaultValue in target) {
            original = target[defaultValue];
        } else {
            original = target.dataset[defaultValue];
        }
        if (original !== ("" + (target.value || target.textContent)).trim()) {
            if (!modified_inputs.has(target)) {
                modified_inputs.add(target);
            }
        } else if (modified_inputs.has(target)) {
            modified_inputs.delete(target);
        }
    });
    addEventListener("beforeunload", (evt) => {
        if (modified_inputs.size && !btn_click) {
            const unsaved_changes_warning = "Changes you made may not be saved.";
            evt.returnValue = unsaved_changes_warning;
            return unsaved_changes_warning;
        }
    });
    addEventListener("")
    })();

    document.getElementById("submit").onclick = function save() {
        btn_click = true;
    }
</script>

知道我做错了什么吗？

最佳答案

原来我做错了几件事。我的猜测是在document.getElementById("submit").onclick下添加"use strict"可能导致错误（https://www.w3schools.com/js/js_strict.asp）或导致检测问题，因为即使没有&& !btn_click时，简单地添加功能也会导致其无法正常工作。我还必须将if (modified_inputs.size && !btn_click) {更改为if (modified_inputs.size >> 0 && !btn_click) {。

最后，最终为我工作的解决方案如下：

<script>
    var btn_click = false;

    function save() {
        btn_click = true;
    }

    "use strict";
    (() => {
    const modified_inputs = new Set;
    const defaultValue = "defaultValue";
    // store default values
    addEventListener("beforeinput", (evt) => {
        const target = evt.target;
        if (!(defaultValue in target || defaultValue in target.dataset)) {
            target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
        }
    });
    // detect input modifications
    addEventListener("input", (evt) => {
        const target = evt.target;
        let original;
        if (defaultValue in target) {
            original = target[defaultValue];
        } else {
            original = target.dataset[defaultValue];
        }
        if (original !== ("" + (target.value || target.textContent)).trim()) {
            if (!modified_inputs.has(target)) {
                modified_inputs.add(target);
            }
        } else if (modified_inputs.has(target)) {
            modified_inputs.delete(target);
        }
    });
    addEventListener("beforeunload", (evt) => {
        if (modified_inputs.size >> 0 && !btn_click) {
            const unsaved_changes_warning = "Changes you made may not be saved.";
            evt.returnValue = unsaved_changes_warning;
            return unsaved_changes_warning;
        }
    });
    addEventListener("")
    })();
</script>

然后将onclick添加到元素：

<button type="submit" class="w3-button w3-right w3-theme" id="button" onclick="save()">Save</button>