JavaScript 准确跟踪哪些键被按下

Question

我有一个永远运行 60FPS 循环的 Web 应用程序，有时我想检查某个键现在是否按下。所以我做了

var keydown = []
window.addEventListener("keydown", function(e){keydown[e.keyCode]=true})
window.addEventListener("keyup", function(e){keydown[e.keyCode]=false})
function loop() {
    if(keydown[17]) console.log("Control is down.")
    if(keydown[71]) console.log("F is down.")
}
setInterval(loop, 16)

问题是，如果用户按 control+F 来搜索页面，那么当他们放开时，查找窗口具有焦点，因此 keyup 不会触发。所以我的应用程序认为 control 和 F 永远关闭。所以我为控制键添加了这个 hack:

// Hack to fix control key being down forever.
window.addEventListener("mousemove", function(e){
    if(keydown[17] && !e.ctrlKey) {
        keydown[17] = false
    }
})

如果我认为 F 键永远按下，我该怎么办？我尝试过重置 VisibilityChange 上的所有键，但当用户搜索时它不会触发。

这里是演示和源代码:http://touchbasicapp.com/testkeyup.html

此错误存在于 Windows 和 Mac、Chrome 和 Safari 上。

Answer 1

当窗口失去焦点(模糊事件)时清除数组可能是最好的选择。

window.addEventListener("blur", function(e) {
    keydown = [];
});

不幸的是，我不认为浏览器一定会在搜索界面打开的情况下触发模糊事件，但他们可能应该这样做。