11

每次我在画布上移动时，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();
4

1 回答 1

25

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

对于接收键盘事件的 DOM 对象，它们首先必须能够将键盘焦点放在页面上。只有这样，键盘事件才会被定向到该对象。对画布对象执行此操作的最简单方法是给它一个tabIndex属性。

canvas.setAttribute("tabindex", 0);

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

于 2013-09-21T16:04:23.267 回答