Javascript 用于画布上键控的addEventListener

我正在尝试制作一个画布应用程序来响应键盘和鼠标输入。我有以下代码：

canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function(event) {
    alert('mousedown');
        }, false);
canvas.addEventListener('keydown', function(event) {
    alert('keydown');
        }, false);

每当我单击鼠标时，“mousedown”警报就会出现，但“keydown”警报永远不会出现。同样的代码在JS Bin上运行良好：

---

为什么它在我的页面上不起作用？canvas不能识别键盘输入吗？

编辑-这个答案是一个解决方案，但一个更简单、更合适的方法是在canvas元素上设置

tabindex

属性（如hobberwickey所建议的）

不能聚焦画布元素。围绕这一点，一个简单的工作就是让你“自己”专注

---

将canvas元素的tabindex设置为1或类似的值

<canvas tabindex='1'></canvas>

---

让任何元素都可聚焦是一个老把戏，它将所有js代码封装在window.onload函数中。我也有类似的问题。所有内容都在javascript中异步加载，因此某些部分的加载速度比其他部分快，包括浏览器。将所有代码放入onload函数将确保您的代码在尝试执行之前可以从浏览器中使用。

有时只需将canvas的tabindex设置为“1”（或“0”）即可。但有时——出于某种奇怪的原因，事实并非如此

在我的情况下（ReactJS应用程序、动态画布el创建和装载），我需要调用canvasEl.focus（）来修复它。

---

也许这与React有关（我以前的基于KnockoutJS的应用程序没有“…focus（）”）

keydown

可能只有在有焦点的情况下才会在画布上启动。我不确定画布元素是否有焦点。这是我将按键事件侦听器分配给HTML5画布的唯一方法。我在做Easeljs的舞台剧。这不起作用：

$（'canvas'）.keypress（function（e）{…}

，直到我在HTML中添加了tabindex。非常感谢。easeljs的唯一缺点是鼠标悬停事件失去焦点（例如鼠标悬停时舞台元素的阴影）。这对我来说很有效，但我注意到将tabindex设置为1会影响Safari中画布的性能。旧答案，但即使在2012年，你也绝对可以：你需要给画布一个

tabindex=“”

和presto:your canvas（但实际上是任何HTML元素）现在可以专注了。这个答案不应该被标记为正确，而应该被接受。我同意你的观点，但不管出于什么原因，@Cbas从来没有接受过Hobberwickes的答案。我已经更新了我的帖子，以供未来的访问者解决这个问题。

<canvas tabindex='1'></canvas>