Javascript 当用户更改选项卡并返回时，停止触发事件侦听器

我正在用JavaScript制作一个游戏，玩家由箭头键控制

如果用户按下箭头键并同时更改选项卡，当他们返回选项卡时，由于事件侦听器在用户更改选项卡后触发

keydown

而未注意到

keydup

，播放器仍在移动

在用户切换选项卡并返回后，如何阻止事件触发

换句话说，我如何确保在用户切换选项卡并返回后，播放机不会根据先前按住的箭头键移动？

下面是我为解决这个问题而制作的一个示例：

var canvas=document.getElementById（'game'）；
var ctx=canvas.getContext（'2d'）；
var-player={x:0，y:0}；
函数循环（）{
//画背景
ctx.fillStyle='蓝色'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//平局球员
ctx.fillStyle='lawngreen'；
ctx.fillRect（player.x，player.y，50,50）；
如果（右）player.x+=1；
请求动画帧（循环）；
}
loop（）；
var-right=false；
addEventListener（'keydown'，函数（e）{
如果（e.key='d'）
右=真；
});
addEventListener（'keyup'，函数（e）{
如果（e.key='d'）
右=假；
});
按D键向右移动
以下是我的想法


函数byId（id）{
返回文档.getElementById（id）
}
函数newEl（标签）{
返回文档.createElement（标记）
}
函数QSA（SEL，PAR =文档）{
返回票面金额
}
window.addEventListener（'load'，onload，false）；
类kbKey{
构造函数（名称、键码）{
this.name=名称；
this.keyCode=keyCode；
归还这个；
}
}
var键=[]；
变量箭头键=[
[null，新的kbKey（'^'，38），null]，
[新kbKey（''，39），]
];
变量numPad=[
[新kbKey（'7'，103），新kbKey（'8'，104），新kbKey（'9'，105）]，
[新kbKey（'4'，100），新kbKey（'5'，101），新kbKey（'6'，102）]，
[新kbKey（'1'，97），新kbKey（'2'，98），新kbKey（'3'，99）]，
[新的kbKey（'>'，39），新的kbKey（'0'，96），新的kbKey（'>'，110）]
];
功能已加载（evt）{
window.addEventListener（'keydown'，onkeydown，false）；
window.addEventListener（'keyup'，onkeyup，false）；
addEventListener（'focus'，onFocus，false）；
window.addEventListener（'blur'，onBlur，false）；
keys=keys.fill（假）；
绘图键（numPad）；
}
函数onkeydown（evt）{
keys[evt.keyCode]=真；
//日志（evt.key，evt.which）；
updateDisplay（）；
}
功能onkeyup（evt）{
keys[evt.keyCode]=false；
updateDisplay（）；
}
函数onBlur（evt）{
keys=keys.fill（假）；
}
功能聚焦（evt）{
updateDisplay（）；
}
函数updateDisplay（）{
让cells=Array.from（qsa（“#键盘td”）；
弗雷奇细胞(
函数（单元格、索引、集合）{
if（cell.dataset.code！=未定义）{
if（键[parseInt（cell.dataset.code）]==true）
cell.classList.add（'active'）；
其他的
cell.classList.remove（'active'）；
}
}
);
}
功能绘图键（keydata2D）{
设tbl=byId（“键盘”）；
forEach（函数（rowArray、rowIndex、rowCollection）{
设tr=newEl（'tr'）；
rowArray.forEach(
函数（键、列、键阵列）{
设td=newEl（'td'）；
tr.appendChild（td）；
if（key！=null）{
td.textContent=key.name；
td.dataset.code=key.keyCode；
}
}
);
附肢儿童（tr）；
});
}
td[数据代码]{
边框：实心1px灰色；
}
.主动{
背景色：#ffad68；
}
在失去焦点时，您只需清除键向下标志，怎么样？按键处理程序可以设置并清除它们，当你失去焦点时，处理程序也可以清除它们。只需添加一个用不同按钮/点击关闭的暂停屏幕就行了吗？@Altigraph很有可能，但必须有一种更简单的方法来实现这一点。我需要确保的是，每当用户更改选项卡并返回时，事件侦听器都会停止。您所说的“按键事件只是在用户返回选项卡时再次运行”是什么意思？您的意思是，即使不再按下按键，也会发生更多的
keydown
事件？这是什么浏览器？在这里，我无法在FF&Chrome@kaido上重新编程，我发布了我的意思示例：