Question

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

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

是的，就我而言，每个对象可以具有任意数量的事件侦听器。只需使用相关的事件侦听器，并将它们附加到相关的HTML对象即可。记住，在Javascript中，每个事件都需要一个事件侦听器。例如：（来自https://gomakethings.com/listening-to-multiple-events-in-vanilla-js/）

这不起作用：

input @ beta + np.ones((n_data, 1)) @ bias

相反，您必须执行以下操作：

document.addEventListener('click mouseover', function (event) {
    // this doesn't work
}, false);

Answer 2

是的，您可以同时拥有，可以执行以下操作：

var someFunction = function (event) {
    // Do something...
};

// Add our event listeners
window.addEventListener('click', someFunction, false);
window.addEventListener('mouseover', someFunction, false);

我使用event.type来确定事件是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))还是click，并在{{1}的情况下使用element.dataset来检索适当的密钥}事件（这些事件没有keydown属性）。

此外，在发生click事件的情况下，keyCode实际上是被单击的键，您可以使用它代替在DOM中查找键（click调用）。 / p>

对事件使用Javascript onclick或keydown

2 个答案: