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