Javascript 几个键盘事件

Question

我目前正在为 Play/Pause (id="play")、上一个 (id=rew) 和下一个 (id="fwd").

我希望在按空格键时 Play/Pause 变为 "clicked"。按向左箭头时，我希望 Previous 为 "clicked"。我希望 Next 在按 RIGHT ARROW 时为 "clicked"。

我已经成功地管理了 Play 的空格键控件：

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

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

但是，当我为我的脚本中的其他两个按钮添加相同的按钮时，播放的空格键控件不再起作用，其他两个也是如此。

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

<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

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

相反，将所有逻辑放入一个按键事件中，如下所示：

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

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

Javascript 几个键盘事件

Javascript several keyboard events

javascript

keyboard

jquery

keyboard-events