Safari浏览器keydown事件失效：如何捕获Command+R快捷键？

我之前也踩过这个坑，Safari对浏览器默认快捷键的拦截逻辑确实和其他浏览器不一样——默认的Command+R刷新动作会优先触发，直接跳过你的自定义代码。下面给你几个能解决问题的方案：

核心修改：阻止默认行为+调整事件绑定对象 #

首先要明确阻止浏览器的默认刷新操作，同时把事件绑定到document而非document.body（避免body未占满页面时事件无法触发的情况）。修改后的代码如下：

$(document).on("keydown", function(event) {
    // 处理Windows/Linux平台的Ctrl+R
    if (event.ctrlKey && event.keyCode === 82) {
        event.preventDefault(); // 阻止默认刷新行为
        alert('ctrl+r event fired.');
    }
    // 处理Mac平台的Command+R（适配Safari）
    if (event.metaKey && event.keyCode === 82) {
        event.preventDefault(); // 关键：必须阻止Safari的默认刷新动作
        alert('command+r event fired.');
    }
});

更现代的写法（推荐） #

keyCode已经被标记为废弃，用event.key判断按键会更直观，兼容性也更好，同样能适配Safari：

$(document).on("keydown", function(event) {
    const isRefreshShortcut = (event.ctrlKey || event.metaKey) && 
                              event.key.toLowerCase() === 'r';
    if (isRefreshShortcut) {
        event.preventDefault();
        alert('Refresh shortcut captured!');
    }
});

额外注意点 #

• 确保页面通过HTTP/HTTPS协议访问，本地file://协议下Safari的安全限制会阻止拦截默认快捷键。
• 如果还是不生效，可以尝试搭配event.stopPropagation()使用，但一般情况下preventDefault()就足够解决问题。

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