页面加载后触发与未触发鼠标事件的差异及onbeforeunload弹窗异常问题

问题根因 #

这个现象是现代浏览器的用户交互激活安全策略导致的，和你的代码逻辑无关。
浏览器为了避免未经用户交互的恶意页面滥用弹窗骚扰用户，对beforeunload事件的确认提示触发做了严格限制：

• 页面必须至少获得过一次真实的用户交互行为（鼠标点击、键盘输入、触摸操作等都算），beforeunload事件中返回的自定义提示才会被浏览器放行，弹出确认窗口
• 如果页面加载后没有任何用户交互就触发卸载，浏览器会直接忽略beforeunload返回的提示内容，不会弹出确认框，直接关闭页面

额外注意事项 #

目前绝大多数主流浏览器（Chrome、Firefox、Safari等）都已经不再支持beforeunload事件里自定义提示文本，不管你返回什么字符串，浏览器都会统一显示自带的“你确定要离开此站点吗？你所做的更改可能不会被保存”这类默认提示，你代码里返回的"Do you really want to close?"实际不会生效。

代码优化建议 #

你现在用的jQuery的bind方法已经在jQuery 3.0之后被废弃，建议换成on方法绑定事件，兼容性更好。
优化后的核心逻辑示例：

$(function(){
    let validNavigation = false;
    // 拦截F5刷新
    $(document).on('keydown', function (e) {
        if (e.keyCode == 116) {
            validNavigation = true;
        }
    });
    // 链接点击标记为合法跳转
    $("a").on("click", () => validNavigation = true);
    // 表单提交标记为合法跳转
    $("form").on("submit", () => validNavigation = true);
    // 提交按钮点击标记为合法跳转
    $("input[type=submit]").on("click", () => validNavigation = true);

    window.onbeforeunload = function () {
        if (!validNavigation) {
            // 这里返回任意非空值即可，自定义文本不会生效
            return true; 
        }
        validNavigation = false;
    };
});

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