javascript - jQuery 按键事件监听器无法识别按键输入

Question

我有一个项目，如果您按某个键，就会播放声音，并且屏幕上的按钮会出现动画。但是，当我按下按键时什么也没有发生。

这是我的事件监听器。

$("document").on("keydown", function(event) {
  makeSound(event.key);
  buttonAnimation(event.key);
});

这是代码查看的内容，以确定根据按下的键来执行操作。

function makeSound(key) {

  switch (key) {
    case "w":
      var tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;

    case "a":
      var tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;

    case "s":
      var tom3 = new Audio('sounds/tom-3.mp3');
      tom3.play();
      break;

    case "d":
      var tom4 = new Audio('sounds/tom-4.mp3');
      tom4.play();
      break;

    case "j":
      var snare = new Audio('sounds/snare.mp3');
      snare.play();
      break;

    case "k":
      var crash = new Audio('sounds/crash.mp3');
      crash.play();
      break;

    case "l":
      var kick = new Audio('sounds/kick-bass.mp3');
      kick.play();
      break;


    default: console.log(key);

  }
}


function buttonAnimation(currentKey) {

  var activeButton = $("." + currentKey);

  activeButton.addClass("pressed");

  setTimeout(function() {
    activeButton.removeClass("pressed");
  }, 100);

}

我做错了什么，事件监听器没有接收到按键事件？我已正确导入 jQuery。

Answer 1

如果要将事件处理程序附加到文档本身，则必须使用 $(document).on("keydown", function(event) {...}) .

要获取按下的键，请使用 event.originalEvent.key .

$(document).on("keydown", function(event) {
  makeSound(event.originalEvent.key);
  buttonAnimation(event.originalEvent.key);
});