javascript - addEventListenerキーダウンが機能しない

Question

インターネットで入手できるいくつかの基本的なPongコードを使用して、キー押下を追加しようとしました。コードは次のとおりです： http: //cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds

私はこれを追加しました：

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

この既存のコードの後：

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

そして私もこれを追加しました：

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

しかし、さまざまなキーを押してみても、関数が呼び出されることはありません。どうしてこれなの？Canvasに焦点が合っていると確信しています。

Answer 1

keydownカーソルでキャンバスの焦点を合わせることができないため、イベントをキャンバスに割り当てることはできません。イベントをウィンドウに割り当てる必要があります。

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

Answer 2

キャンバスをウィンドウに置き換えてみることができます。

Answer 3

私は1階に同意しますが、あなたはこれを試みることができます。次のように：

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