javascript - addEventListener keydown 不起作用

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

但是即使我尝试按各种键，也不会调用该函数。为什么是这样？我很确定画布是焦点。

Answer 1

您无法将keydown事件分配给画布，因为您无法使用光标聚焦画布。您需要将事件分配给窗口：

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

Answer 2

您可以尝试将canvas替换为window。

Answer 3

我同意一楼，但你可以尝试这样做。如下：

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