使用JavaScript/jQuery禁用浏览器刷新重载的实现方法

你写的拦截逻辑不生效核心是两点：

• 事件绑定优先级不足：直接给window绑定冒泡阶段的keydown事件时，浏览器内置的刷新快捷键响应优先级更高，尤其是焦点在输入框、内嵌iframe等元素上时，事件可能没冒泡到window层就被消费
• 兼容覆盖不全：keyCode属性已被Web标准废弃，高版本Chrome、Safari对该属性的返回值存在兼容偏差，且逻辑仅拦截了F5按键，没有覆盖Ctrl+R、Ctrl+F5、Mac端Cmd+R等其他触发刷新的快捷键

$(document).ready(function(){
  // 绑定到document对象，开启事件捕获阶段触发，优先级高于浏览器默认快捷键响应
  document.addEventListener('keydown', function(event){
    // 识别F5按键，同时兼容新旧标准属性
    const pressF5 = event.key === 'F5' || event.keyCode === 116;
    // 识别Windows/Linux端 Ctrl+R普通刷新、Ctrl+F5强刷
    const pressCtrlRefresh = event.ctrlKey && (event.key?.toUpperCase() === 'R' || event.keyCode === 82);
    // 识别Mac端 Cmd+R普通刷新、Cmd+Shift+R强刷
    const pressMacRefresh = event.metaKey && (event.key?.toUpperCase() === 'R' || event.keyCode === 82);

    if (pressF5 || pressCtrlRefresh || pressMacRefresh) {
      event.preventDefault();
      event.stopImmediatePropagation();
      return false;
    }
  }, true);
});

• 利用DOM事件流优先级拦截：DOM事件的传播顺序是「捕获阶段→目标阶段→冒泡阶段」，浏览器内置快捷键默认在冒泡阶段之后响应，给addEventListener传入第三个参数true，可以让回调在捕获阶段触发，第一时间阻断事件，避免被浏览器默认逻辑捕获
• 多属性做兼容判断：优先用标准的event.key判断按键，兜底保留旧版keyCode逻辑，覆盖所有主流浏览器的按键值返回规则
• 全量覆盖刷新触发场景：除了F5之外，把不同系统下的键盘刷新快捷键全部纳入拦截范围，避免漏拦截

重要提示：前端JS只能拦截页面内触发的键盘类刷新操作，用户点击浏览器工具栏刷新按钮、右键菜单选刷新、地址栏按回车这类非页面内触发的刷新行为，受浏览器安全策略限制，前端没有权限拦截。

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