Canvas 游戏 Space Bar Scrolls 浏览器

Question

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

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

但是每当我点击 space 栏时，浏览器 window 就会滚动。

有什么方法可以在键盘事件到达浏览器之前吞下它们吗？

（我试过将处理程序放在 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
);

代码段现在包含 Kaiido 给出的重要建议这是工作演示的 link。 https://codesandbox.io/s/o714xx10nz

Canvas 游戏 Space Bar Scrolls 浏览器

Canvas Game Space Bar Scrolls Browser

javascript

canvas

keyboard-events