如何识别beforeunload触发事件？避免表单提交触发提示

核心思路是通过状态标记区分用户的操作类型——是提交表单，还是刷新/关闭页面，具体实现步骤如下：

1. 定义一个全局变量跟踪提交状态

let isSubmitting = false;

2. 给表单绑定提交事件，触发时将状态标记为true

// 替换为你页面中表单的选择器，比如#user-form或.form-class
document.querySelector('form').addEventListener('submit', function() {
    isSubmitting = true;
});

3. 修改beforeunload事件逻辑，仅当非提交操作时触发提示

window.addEventListener('beforeunload', function(e) {
    if (!isSubmitting) {
        e.preventDefault();
        e.returnValue = '';
        // 部分浏览器需要返回字符串才能触发提示，也可写入具体提示文本，比如"你有未保存的更改，确定要离开吗？"
        return '';
    }
});

额外注意事项：

• 如果使用AJAX提交表单，需要在请求发送前设置isSubmitting = true，若提交后仍需保留页面，可在请求完成后重置状态
• 不同浏览器对beforeunload的提示内容有不同限制，部分会强制使用浏览器默认提示文本，但不影响核心逻辑

内容的提问来源于stack exchange，提问作者C Regnew