Html5 canvas 如何为HTML5画布注册onkeydown事件

我想用HTML5

元素编写一个蛇游戏演示。我试图注册键盘（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

---

如果HTML元素不是为文本输入而设计的，则不能为其设置keydown事件

正如你所做的那样，使用

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

---

然后使用转向功能更改snake对象的方向。如果你有一条以上的蛇，那么对每一条蛇使用不同的键。

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

canvas.tabIndex = 1000;

但是，可以强制为它们设计元素

canvas.tabIndex = 1000;

现在您可以对键盘事件使用

canvas.addEventListener

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

请注意，当画布具有焦点时，在某些浏览器中可能会看到虚线轮廓。要删除此项，请执行以下操作：

canvas.style.outline = "none";

---

玩得开心

我明白了，非常感谢。我尝试为元素注册keydown事件，但仍然无法工作。。网站提示：“onkeydown属性不能用于：，
，，，，或”如果您为元素设置了属性tabIndex（未使用的除外），则注册keydowm事件可以工作。如下所示：canvas.addEventListener（“keydown”，direction，false）；我是中国人，我的英语不好！如果有语法错误，我很抱歉。谢谢你帮我纠正语法错误。在谷歌浏览器上似乎不起作用。只是尝试复制此事件，但事件处理程序不运行。在多做一点测试之后——当我点击画布时，它就开始工作了（给它焦点…）。其他事件，例如

mousemove

显然不需要该焦点。