Javascript 'keydown' 事件监听器不工作

Question

每次我在 Canvas 上移动时，mousemove 事件都会起作用并调用 onMouseMove。虽然，keydown 和 keyup 事件永远不会起作用。我单击 Canvas 并按下一些键，但没有触发任何事件。有谁知道为什么这些事件不起作用？谢谢你的任何建议!如果有人好奇代码的来源，我正在学习关于 udacity 的 html5 类(class)。

InputEngineClass = Class.extend({

keyState: new Array(),

setup: function() {
    document.getElementById("gameCanvas").addEventListener('mousemove', gInputEngine.onMouseMove);
    document.getElementById("gameCanvas").addEventListener('keydown', gInputEngine.onKeyDown);
    document.getElementById("gameCanvas").addEventListener('keyup', gInputEngine.onKeyUp);
},

onMouseMove: function (event) {
    console.log("Called onMouseMove");
    var posx = event.clientX;
    var posy = event.clientY;
},

onKeyDown: function (event) {
    console.log("KEY DOWN!!!");
    keyState[event.keyID] = true;
    gInputEngine.update();
},

onKeyUp: function (event) {
    console.log("KEY UP!!!");
    keyState[event.keyID] = true;
},  

update: function() {
    KeyW = 87;

    if(gInputEngine.keyState[KeyW]) console.log("FORWARD!!!");   
}  
});

gInputEngine = new InputEngineClass();

Answer 1

我会把我的评论变成一个答案，这样你就可以结束这个问题了。

要让 DOM 对象接收键盘事件，它们必须首先能够获得页面上的键盘焦点。只有这样，键盘事件才会指向该对象。为 Canvas 对象执行此操作的最简单方法是为其提供 tabIndex 属性。

canvas.setAttribute("tabindex", 0);

您可以在此处查看其他人对该问题的总结:http://www.dbp-consulting.com/tutorials/canvas/CanvasKeyEvents.html