Question

JS的新手，我有这样的功能

cvs.addEventListener("mousedown", function (e) {
    e.preventDefault();
    some_game_state_change_operation();
});

我想将鼠标控制操作更改为键盘控制：

cvs.addEventListener("keydown", function (e) {
    e.preventDefault();
    some_game_state_change_operation();
});

现在，无论我按什么键，都不会发生任何事情。函数some_game_state_change_operation()从未执行。为什么？

可能的相关行：

function render(gameState) {
    render.cvs = document.getElementById("cvs");
    ...
}

Answer 1

我猜cvs是一个画布，您无法用光标聚焦它。将keydown侦听器附加到窗口而不是cvs。

window.addEventListener("keydown", function (e) {
    e.preventDefault();
    some_game_state_change_operation();
});

Answer 2

如果cvs是canvas，除非您向其添加tabindex，否则无法将其重点关注，在这种情况下，keydown事件监听器将在画布专注于。 tabindex中的-1可以使您的canvas集中精力，但不会按Tab键排序。

<canvas id="cvs" tabindex="-1" height="50" width="100" style="border: 1px solid black;"></canvas>
<br/>
<span id="result"></span>
<script>
document.getElementById("cvs").addEventListener("keydown", function (e) {
    e.preventDefault();
    document.getElementById("result").innerHTML = "KeyCode: "+e.keyCode+" Key: "+e.key;
});
</script>

addEventListener：为什么不能将“ mousedown”替换为“ keydown”？

2 个答案: