Javascript的几个键盘事件

Question

我目前正在构建一个音乐播放器，带有三个按钮(实际上是简单的 div)，用于播放/暂停 (id="play")、上一个 (id=rew) 和下一个 (id="fwd")。

我希望在按空格键时“单击”播放/暂停。 我希望按向左箭头时“单击”上一个。 我希望在按向右箭头时“单击”下一步。

我已经成功管理了 Play 的空格键控制:

var play = document.getElementById("play");

document.onkeydown = function (e) {
    if (e.keyCode == 32) {
        play.click();
    }
}; 

但是，当我在脚本中为其他两个按钮添加相同的按钮时，“Play”的空格键控件以及其他两个按钮不再起作用。

所以，我的脚本中当前的内容显然不起作用:

<script>
var play = document.getElementById("play");

document.onkeydown = function (e) {
    if (e.keyCode == 32) {
        play.click();
    }
}; 


var rew = document.getElementById("rew");

document.onkeydown = function (e) {
    if (e.keyCode == 37) {
        rew.click();
    }
}; 

var fwd = document.getElementById("fwd");

document.onkeydown = function (e) {
    if (e.keyCode == 39) {
        fwd.click();
    }
}; 
</script>

我做错了什么？

Answer 1

您的每个按键事件都会覆盖前一个事件。

相反，将所有逻辑放入一个 keydown 事件中，如下所示:

var play = document.getElementById("play");
var rew = document.getElementById("rew");
var fwd = document.getElementById("fwd");

document.onkeydown = function(e) {
  if (e.keyCode == 32) {
    play.click();
  } else if (e.keyCode == 37) {
    rew.click();
  } else if (e.keyCode == 39) {
    fwd.click();
  }
};