Canvas游戏空间栏滚动浏览器

Question

var canvas = document.getElementById('myCanvas');
canvas.addEventListener('keydown', function (event) {
   myHandleKeyboardEvent(event);
}, false);

这对我来说很好。事件被发送到我的处理程序。

但是每当我点击空格键时，浏览器窗口就会滚动。

有没有办法在键盘事件到达浏览器之前就把它们吞掉呢？

(我已经尝试将处理程序放在window和document上，结果相同)。

Answer 1

既然它起作用了，我就把它贴出来作为答案：

var canvas = document.getElementById("myCanvas");
document.addEventListener(
  "keydown",
  function(event) {
    if (document.activeElement && document.activeElement.id === canvas.id) {
      event.preventDefault();
      myHandleKeyboardEvent(event);
    }
  },
  false
);

Snippet现在包含了Kaiido给出的重要建议，这是一个到工作演示的链接。https://codesandbox.io/s/o714xx10nz