javascript - 如何在 Canvas 上捕获按键事件而不干扰网站的其余部分？

Question

我正在使用一些教程开发 Canvas 游戏，并调整它们以进行一些人工智能交互。游戏运行得很好，除了我的事件监听器目前刚刚添加到文档中。当我将游戏移动到我的实际网站时，这成为一个问题，因为我需要 e.preventDefault 来防止页面滚动。没什么大不了的，直到人们想要输入我的联系表格并且他们无法使用空格键或箭头键为止。足够简单的修复似乎只是将事件监听器添加到我的 Canvas 中。

但是，当我使用 canvas.addEventListener() 和之前使用的相同参数时，我无法让 Canvas 关注事件。他们似乎根本没有注册。我尝试单击 Canvas 以使其“聚焦”，但这似乎没有任何作用。

所以问题是如何让 Canvas 并且只有 Canvas 监听 keydown 事件？

这有效，但破坏了我的表单

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);

Answer 1

我的处理方式in my game engine我将 Canvas 放在 div 内，然后从那里捕获事件。确保在 div 上设置 tabindex，以便它可以聚焦。

var ctx = document.querySelector('canvas').getContext('2d');
ctx.rect(0, 0, 320, 240);
ctx.fillStyle = '#0F0';
ctx.fill();
var container = document.querySelector('div');
container.addEventListener('keypress', function(e) {
  console.log(e);
});

div:focus {
  outline: none;
}

<div tabindex="1">
  <canvas width="320" height="240"></canvas>
</div>