Javascript'keydown'事件监听器无法正常工作

Question

每次我在画布上移动时,mousemove事件都会起作用并调用onMouseMove.虽然,keydown和keyup事件永远不会奏效.我点击画布并点击一些键,但没有触发任何事件.有谁知道为什么事件不起作用？谢谢你的建议!如果有人对代码的来源感到好奇,我正在关注udacity的html5课程.

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