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

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

1 个答案: