JavaScript 准确地跟踪哪些键被关闭答案

【问题标题】：JavaScript keep track of which keys are down accuratelyJavaScript 准确地跟踪哪些键被关闭
【发布时间】：2023-03-25 19:03:01
【问题描述】：

我有一个永远运行 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 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。

【问题讨论】：

检查窗口模糊事件可能吗？另外，请记住 Cmd + F 用于 macOS 用户 (e.metaKey)，以及其他可以切换焦点的东西。
谢谢你的作品！我用 window.addEventListener('blur', function(e){keydown=[]}) 更新了示例，所以现在万无一失？

标签： javascript keyboard-events dom-events

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您需要停止关键事件以防止组合：

var keydown = []
window.addEventListener("keydown", function (e) {
	e.preventDefault();
	keydown[e.keyCode] = true;
});
window.addEventListener("keyup", function (e) {
	e.preventDefault();
	keydown[e.keyCode] = false;
});

function loop() {
	var comb = "";
	if (keydown[17]) comb += "CTRL";
	if (keydown[70]) {
		if (keydown[17]) comb += "+";
		comb += "F";
	}
	if ((keydown[17]) || (keydown[70])) console.log("I press " + comb);
}
setInterval(loop, 50);

【讨论】：