如何为HTML5画布注册onkeydown事件

Question

如何为HTML5画布注册onkeydown事件

6

我希望使用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

- Kinematic

1

我是中国人，我的英语不好！如果有任何语法错误，非常抱歉。谢谢你帮我纠正语法错误。 - Kinematic

2个回答

-1

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

就像您所做的一样使用

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

然后使用divertDirection函数来改变蛇对象的方向。如果您有多条蛇，则为每条蛇使用不同的键。

- jing3142

我尝试为<div>元素注册keydown事件，但仍然无法正常工作。 - Kinematic

1

该网站注明："onkeydown属性不能与以下标签一起使用：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>或<title>"。请访问http://www.w3schools.com/tags/ev_onkeydown.asp。 - Kinematic

1

如果为元素设置tabIndex属性（除非未使用），则注册keydown事件可以正常工作。代码如下： <canvas id="snake" width="400" height="600" tabindex=0> </canvas> canvas.addEventListener("keydown", divertDirection, false); - Kinematic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niet the Dark Absol · Accepted Answer

正如jing3142所说，您不能在不为键盘事件设计的元素上侦听它们。

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

canvas.tabIndex = 1000;

现在您可以使用canvas.addEventListener来处理键盘事件。这比使用window.addEventListener更好，因为这样就不会干扰页面上的其他元素，如实际输入元素。

请注意，在一些浏览器中，当画布获得焦点时，您可能会看到一个点线框。要删除它：

canvas.style.outline = "none";

玩得开心！