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

Answer 2

您需要使用event.which来捕获按下的键，然后比较键码（可以使用控制台日志获取）。似乎根据键盘区域而改变。我相信它不会拾取修改键（Caps，Shift，Ctrl）。

编辑：

简短示例

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

function makeSound(key) {

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

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

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

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

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

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

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


    default: console.log(key);

  }
}

我使用的那些键码可能对您不起作用，请确保console.log event。哪个可以获取正确的键码。如果启用了大写锁定，则每个字符的key.code将不同。

Answer 3

不要用document包装""。只需使用$(document)。它应该可以解决您的问题。仅更新一次即可查看下面的代码。

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

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Answer 4

您的代码中有问题，您将事件对象发送到makeSound(event);，因此必须使用key.key而不是将整个对象与字符串值进行比较：

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

function makeSound(key) {
  console.log(key.key);
  switch (key.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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

jQuery按键事件侦听器无法识别按键输入

4 个答案: