Javascript几个键盘事件答案

【问题标题】：Javascript several keyboard eventsJavascript几个键盘事件
【发布时间】：2017-07-08 21:38:12
【问题描述】：

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

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

我已经成功管理了 Play 的 SPACEBAR 控件：

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

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

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

所以，我目前在我的脚本中并且显然不起作用的是：

<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>

我做错了什么？

【问题讨论】：

addEventListener 是添加事件的方式...

标签： javascript jquery keyboard keyboard-events

【解决方案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();
  }
};

【讨论】：

【解决方案2】：

当您多次分配给onkeydown 时，只会分配最后一个，因为它将覆盖前一个。您可以改用addEventListener，但这也不是最好的方法。只需像这样在一个事件侦听器中进行更多测试：

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 == 32) {
        rev.click();
    }
    else if(e.keyCode == 32) {
        fwd.click();
    }
};

【讨论】：