Il listener di eventi 'keydown' Javascript non funziona

L'evento mousemove funziona e chiama su MouseMove ogni volta che si sposta sull'area di disegno. Sebbene, gli eventi key-down e keyup non funzionino mai. Faccio clic sulla tela e prendo alcuni tasti, ma nessun evento viene attivato. Qualcuno sa perché gli eventi non stanno funzionando? Grazie per qualsiasi consiglio! Sto seguendo il corso html5 su udacity se qualcuno è curioso da dove proviene il codice.Il listener di eventi 'keydown' Javascript non funziona

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

fonte

2013-09-21 user1668814

Che tipo di oggetto è 'gameCanvas'? Se non ottiene mai lo stato attivo della tastiera (o se ha figli che ottengono lo stato attivo), non otterrà gli eventi della tastiera. Un oggetto deve prima ottenere il focus della tastiera prima che gli eventi della tastiera vengano inviati ad esso. – jfriend00

Si tratta di una tela creata in questo modo: 'corpo = document.getElementById ("corpo");' ' tela = document.createElement ("tela");' ' canvas.setAttribute ("id"," gameCanvas ");' 'canvas.width = window.innerWidth;' 'canvas.height = window.innerHeight;' 'body.appendChild (tela);' – user1668814

Grazie @ jfriend00 Ho cercato su google la tastiera e ho determinato che io necessario per aggiungere questo ai miei tela: 'canvas.setAttribute ("tabindex", 0);' – user1668814

Trasformerò il mio commento in una risposta in modo da poter concludere questa domanda.

Affinché un oggetto DOM possa ricevere eventi di tastiera, devono prima essere in grado di mettere a fuoco la tastiera su una pagina. Solo allora gli eventi della tastiera verranno indirizzati a quell'oggetto. Il modo più semplice per farlo per un oggetto canvas è assegnargli un attributo tabIndex.

canvas.setAttribute("tabindex", 0);

Si può vedere sintesi di qualcun altro di quel problema qui: http://www.dbp-consulting.com/tutorials/canvas/CanvasKeyEvents.html

fonte

2013-09-21 16:04:23 jfriend00

Il listener di eventi 'keydown' Javascript non funziona

risposta

Problemi correlati