onkeydown 事件在 canvas 上不起作用？

Question

我有一个 canvas 和一个分配给它的 onkeydown 事件。当按下 any 键时，控制台应该记录该键的 keyCode。但它没有输出任何东西，甚至没有 undefined。 onclick 等其他处理程序工作正常，但 onkeydown 不是。我也尝试过使用 onkeypress 和 onkeyup，但它们也不起作用。这是完整的代码：

canvas.onkeydown = function(e){
    if(e.keyCode === 37){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(knife,knifeX - 10, knifeY);
        knifeX -= 10;
    }
    else if(e.keyCode === 39){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(knife,knifeX + 10, knifeY);
        knifeX += 10;           
    }
    else if(e.keyCode === 38){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(knife,knifeX, knifeY + 10);
        knifeY += 10;
    }
    else if(e.keyCode === 40){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(knife,knifeX, knifeY - 10);
        knifeY -= 10;               
    }
    console.log(e.keyCode);     
}

Answer 1

相反，如果使用 canvas.onkeydown，请使用 window.onkeydown，否则您需要专注于 canvas 才能正常工作。

window.onkeydown = function() {};

附加到 canvas 元素只有在您专注于该元素时才有效。 window 对象是整个浏览器。

onkeydown 事件在 canvas 上不起作用？

onkeydown event not working on canvas?

javascript

canvas

keycode

event-handling

onkeydown