Javascript 我如何在画布上捕捉按键事件而不干扰网站的其余部分？

我正在使用一些教程制作一个画布游戏，并对它们进行调整以实现一些AI交互。除了我的事件监听器刚刚添加到文档中之外，这个游戏运行得非常好。当我将游戏移动到我的实际网站时，这就成了一个问题，因为我需要

e.preventDefault

来防止页面滚动。直到人们想在我的联系方式中输入信息，但他们不能使用空格键或箭头键，这才算什么大不了的。足够简单的修复似乎只是将事件侦听器添加到我的画布中

但是，当我使用

canvas.addEventListener（）

时，使用的参数与我之前使用的参数相同，我无法让画布关注事件。他们似乎根本没有注册。我试着点击画布使其“聚焦”，但这似乎没有任何作用

所以问题是如何让画布和画布只监听按键事件

这起作用，但破坏了我的形式

addEventListener('keydown', function(e) {
    keysDown[e.keyCode] = true;
    switch(e.keyCode) {
        case 37: case 38: case 39: case 40:
        case 32: e.preventDefault(); break;
        default: break;
    }
}, false);

这不起作用

var canvas = document.getElementById('world');
canvas.addEventListener('keydown', function(e) {
    keysDown[e.keyCode] = true;
    switch(e.keyCode) {
        case 37: case 38: case 39: case 40:
        case 32: e.preventDefault(); break;
        default: break;
    }
}, false);

我处理它的方式是将画布放在

div

中，然后从那里捕获事件。确保在

div

上设置了

tabindex

，以使其能够聚焦

var ctx=document.querySelector（'canvas'）.getContext（'2d'）；
ctx.rect（0,0320240）；
ctx.fillStyle='#0F0'；
ctx.fill（）；
var container=document.querySelector（'div'）；
container.addEventListener（'keypress'，函数（e）{
控制台日志（e）；
});
div:focus{
大纲：无；
}
您应该检查另一个问题：

修复方法是缓存最后一个关注的元素，然后询问它是否是画布，然后做一些不同的事情

希望它能起作用
 重要的部分是将画布的tabIndex设置为1（这是使任何元素都可聚焦的肮脏技巧）

现在您可以：

canvasDiv.addEventListener('keyup', (e) => {
    console.log(e,keyCode)
}, false)

请注意，Im使用的是键控，因为它还捕获了Del、Home、End、Ins。。。按钮，keydown仅捕获来自这些按钮的插件keypress仅用于捕获可打印的按键。因此，请选择适合您需要的选项。
您能提供一个事件注册的示例代码吗？如果您需要更多信息，请告诉我？我想我解决了你的问题？keysDown数组在我的主游戏循环中得到处理，案例32中有更多的代码来启动游戏。我在事件侦听器函数中放置了一个console.log，当我使用canvas.add而不是add时，它不会打印。您在上面几行声明
keysDown[e.keyCode]
array。只是一个空数组。在keyup上，我删除了那个keycode。这不是问题的一部分，因为该代码之前的console.log无法启动。我对此进行了升级，因为它可能会起作用，而且是一个格式良好的答案，但胡安·巴勃罗的答案首先击中了我，对我起作用，所以我接受了他的答案。这似乎可行，但确实需要画布在启动任何键盘事件之前具有焦点。这并不出乎意料，但我认为应该指出这一点。
canvasDiv.addEventListener('keyup', (e) => {
    console.log(e,keyCode)
}, false)