javascript - 使用 Javascript onclick 或 keydown 事件

Question

我正在使用 JavaScript 和 CSS 创建可翻转并播放声音的按键。正面有一个图像，然后当按下按键时，它会发出声音并翻转以狂欢，背面显示不同的图像，并在释放按键后翻转回来。该代码适用于该目的，但我希望当有人也单击该键时具有相同的功能。我可以两者都拥有吗？

function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }

  function playSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
    if (!audio) return;

    key.classList.add('playing');
    audio.currentTime = 0;
    audio.play();
  }

  const keys = Array.from(document.querySelectorAll('.key'));
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
  window.addEventListener('keydown', playSound); 

Answer 1

是的，你可以两者兼得，你可以这样做:

function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  e.target.classList.remove('playing');
}

function playSound(e) {
  let keyCode;
  if (e.type === 'click') {
    keyCode = e.currentTarget.dataset.key;
  } else {
    keyCode = e.keyCode;
  }

  const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
  const key = document.querySelector(`div[data-key="${keyCode}"]`);
  if (!audio) return;

  key.classList.add('playing');
  audio.currentTime = 0;
  audio.play();
}

const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);
keys.forEach(key => key.addEventListener('click', playSound))

我用过event.type确定事件是click还是keydown并使用element.dataset在发生 click 事件时检索适当的 key (这些事件没有 keyCode 属性)。

此外，在 click 事件的情况下，event.target 实际上是单击的键，您可以使用它而不是在 DOM 中查找键(querySelector(`div[data-key="${keyCode}"]`) 调用)。