Chrome按F11退出全屏时JavaScript的onkeydown事件不触发如何解决

Chrome浏览器针对F11触发的系统级全屏逻辑，会在页面进入全屏状态后，把F11按键事件的处理优先级收归浏览器系统层，不会再将该事件冒泡到页面的JS上下文，因此退出全屏时的F11按键无法被document.onkeydown监听到。
而进入全屏时，页面处于常规窗口上下文，按键事件还能正常派发给JS监听函数，因此变量计数正常+1。

• 方案一：更换监听事件为keyup，相比keydown，keyup事件在全屏状态下的派发优先级更高，多数场景下能捕获到退出全屏的F11按键，代码修改如下：

var countF11 = 0;
document.onkeyup = function (e) {
    // 补充key属性判断兼容不同浏览器内核
    if (e.keyCode == 122 || e.key === 'F11') {
        countF11++;
        document.getElementById("status").innerHTML = countF11;
    }
}

• 方案二：主动接管F11的默认行为，完全由JS控制全屏切换，避免浏览器抢占事件，同时可以增加全屏状态变化监听做兜底，适配用户手动点击退出全屏等非按键触发的场景：

var countF11 = 0;
// 监听F11按键
document.addEventListener('keydown', function(e) {
    if (e.key === 'F11' || e.keyCode === 122) {
        countF11++;
        document.getElementById("status").innerHTML = countF11;
        // 阻止浏览器默认的F11全屏行为
        e.preventDefault();
        // 自行控制全屏切换
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    }
});

// 兜底监听全屏状态变化，覆盖非按键触发的全屏切换场景
var lastFullscreenStatus = !!document.fullscreenElement;
document.addEventListener('fullscreenchange', function() {
    const currentStatus = !!document.fullscreenElement;
    if (currentStatus !== lastFullscreenStatus) {
        countF11++;
        document.getElementById("status").innerHTML = countF11;
        lastFullscreenStatus = currentStatus;
    }
});

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