如何为HTML5画布注册onkeydown事件

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";

玩得开心!