Javascript 'Keydown' Ereignis Listener funktioniert nicht

Das Mauszeiger-Ereignis funktioniert und ruft onMouseMove jedes Mal, wenn ich auf der Leinwand bewegen. Die Keydown- und Keyup-Ereignisse funktionieren jedoch nie. Ich klicke auf die Leinwand und drücke einige Tasten, aber kein Ereignis wird ausgelöst. Weiß jemand, warum die Ereignisse nicht funktionieren? Danke für irgendeinen Rat! Ich folge dem html5-Kurs auf Udacity, wenn jemand neugierig ist, woher der Code stammt.Javascript 'Keydown' Ereignis Listener funktioniert nicht

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();

Quelle

2013-09-21 user1668814

Um welche Art von Objekt ist 'gameCanvas'? Wenn es nie den Tastaturfokus erhält (oder Kinder, die den Fokus erhalten), werden keine Tastaturereignisse angezeigt. Ein Objekt muss zuerst den Tastaturfokus erhalten, bevor Tastaturereignisse an es gesendet werden. – jfriend00

Es ist eine Leinwand wie folgt erstellt: 'body = document.getElementById ("body");' ' Leinwand = document.createElement ("Leinwand");' ' canvas.setAttribute ("id"," gameCanvas ");' 'canvas.width = window.innerWidth;' 'canvas.height = window.innerHeight;' 'body.appendChild (Leinwand);' – user1668814

Danke @ jfriend00 Ich googelte Tastaturfokus und stellte fest, dass ich benötigt, um hinzuzufügen, dies zu meiner Leinwand: 'canvas.setAttribute ("tabindex", 0);' – user1668814

Ich werde meinen Kommentar in eine Antwort umwandeln, damit Sie diese Frage abschließen können.

Damit ein DOM-Objekt Tastaturereignisse empfangen kann, müssen sie zuerst den Tastaturfokus auf einer Seite abrufen können. Nur dann werden Tastaturereignisse an dieses Objekt gerichtet. Der einfachste Weg, dies für ein Canvas-Objekt zu tun, ist, ihm ein tabIndex Attribut zu geben.

canvas.setAttribute("tabindex", 0);

Sie können jemand andere Zusammenfassung dieses Problem sehen hier: http://www.dbp-consulting.com/tutorials/canvas/CanvasKeyEvents.html

Quelle

2013-09-21 16:04:23 jfriend00

Javascript 'Keydown' Ereignis Listener funktioniert nicht

Antwort

Verwandte Themen