Question

我想用HTML5 <canvas>元素编写蛇形游戏演示。我试图注册键盘（onkeydown）事件，但它不起作用。

代码：

   canvas.onkeydown = divertDirection; //don't work
   //canvas.addEventListener("keydown", divertDirection, false);  //don't work

   //根据键盘来调振蛇移动的方向
   function divertDirection(ev) {
        console.log(ev);
    }

    //register this event for widnow
   window.addEventListener("keydown", divertDirection, false); //ok

Answer 1

正如jing3142所说，你不能在不是为他们设计的元素上听取键盘事件。

但是，您可以强制为其设计元素。

canvas.tabIndex = 1000;

现在，您可以将canvas.addEventListener用于键盘事件。

这比window.addEventListener更好，因为这样你就不会干扰页面上的任何其他元素，例如实际的输入元素。

请注意，当画布具有焦点时，您可能会在某些浏览器中看到虚线轮廓。要删除它：

canvas.style.outline = "none";

玩得开心！

Answer 2

如果HTML元素不是为文本输入设计的，那么您就无法为其设置keydown事件。

正如你已经使用

window.addEventListener("keydown", divertDirection, false);

然后使用divertDirection函数更改蛇对象的方向。如果你有一条以上的蛇，那么每只蛇都使用不同的钥匙。

如何为HTML5画布注册onkeydown事件

2 个答案: