addEventListener keydown funktioniert nicht

Nahm ich einige grundlegende Pong-Codes auf das internet und versucht, um Tastatureingaben, der code ist hier: http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds

Fügte ich hinzu:

canvas.addEventListener("keydown", handlekeydown, true);

Nach dieser bestehende code:

canvas.addEventListener("mousemove", trackPosition, true);
canvas.addEventListener("mousedown", btnClick, true);

Und ich habe auch diese:

function handlekeydown(e) {
  console.log("debug");
  console.log("keycode: "+e.keyCode);
}

Aber die Funktion wird nie aufgerufen, obwohl ich versuche durch drücken verschiedener Tasten. Warum ist das so? Ich bin mir ziemlich sicher, dass die Leinwand im Fokus.

mögliche Duplikate von addEventListener keydown auf Leinwand

InformationsquelleAutor JBurace | 2013-03-26

  1. 15

    Können Sie nicht zuordnen keydown Ereignis auf der Leinwand, weil Sie können sich nicht konzentrieren, die Leinwand mit dem cursor. Sie müssen ordnen Sie das Ereignis in das Fenster: 

    window.addEventListener("keydown", handle, true);

    InformationsquelleAutor Jean Lourenço

  2. 6

    Können Sie versuchen, zu ersetzen Leinwand mit Fenster.

    InformationsquelleAutor metalwings

  3. -2

    Ich Stimme mit dem ersten Stock, aber Sie können versuchen, dies zu tun. Wie folgt:

    //set attribute tabindex = 0 (other number), ensure the canvas in the focus sequence
//like this, you can focus canvas
//http://www.w3schools.com/tags/att_global_tabindex.asp
<canvas id="snake" width="400" height="600" tabindex=0 > </canvas> 

//then register keydown event
document.getElementById("snake").addEventListener("keydown", function(ev){
          console.log(ev);
}, true);

    InformationsquelleAutor Kinematic

Schreibe einen Kommentar