Javascript几个键盘事件

Question

我目前正在为播放/暂停（id =“play”），上一个（id = rew）和下一个（id =“fwd”）三个按钮（实际上是简单的div）构建音乐播放器。 。

我想要播放/暂停按下空格键时“点击”。 我希望在按下左箭头时“上一个”被“点击”。 我希望按下右箭头时可以“点击”下一个。

我已经成功地管理游戏的这个空格键控制：

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

您的每个keydown事件都覆盖了前一个事件。

相反，把所有的逻辑放到一个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(); 
    } 
}; 

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