如何注册为的onkeydown HTML5画布事件(How to register onkeydow

我想编写一个蛇游戏试玩与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函数改变蛇对象的方向。 如果你有一个以上的蛇，然后使用不同的密钥对每个蛇。

文章来源: How to register onkeydown event for HTML5 canvas