Question

我正在尝试监听两种事件类型（keydown和click），并在两者上执行相同的功能（切换某些音频文件的播放和暂停）。

keydown的事件侦听器工作正常，但是当我尝试对click使用相同的函数时，什么也没发生。使用audio作为事件类型时，控制台日志记录click为空。

有人能对此有所启发吗？

请注意，我仅尝试使用香草JS（我的代码基于Wes Bos的Javascript 30课程的第一个项目）。

代码如下：

  function toggleSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
    if(!audio) return; 
    if (audio.paused) {
     audio.currentTime = 0; 
     audio.play();
     key.classList.add('playing'); 
      } else {
        audio.pause();
        key.classList.remove('playing');
      }
  };
  function removeTransition(e) {
    if(event.propertyName !== 'transform') return; 
    this.classList.remove('playing'); 
  }
  const keys = document.querySelectorAll('.key');
  keys.forEach(key => key.addEventListener('ended', removeTransition));

  window.addEventListener('keydown',  toggleSound);
  window.addEventListener('click', toggleSound);

Answer 1

您实际上是以错误的方式添加了此侦听器，当您使用以下代码时：

window.addEventListener（'click'，clickSound）

您正在运行clickSound方法，并且在此方法内部，您为keys数组中的每个项目添加了另一个侦听器（我不知道它是什么，但是我认为它是html元素，因为您正在使用也可以使用addEventListener

要解决此问题，您可以删除此window.addEventListener（'click'，clickSound）并添加按键本身的侦听器

类似



keys.forEach(key => {
  key.addEventListener('click', e => {
    const dataKey = e.target.dataset.key;
    const audio = document.querySelector(`audio[data-key="${dataKey}"]`);

    if (!audio) return; // Just to be sure the element was found
    if (audio.paused) {
      audio.currentTime = 0;
      audio.play();
      key.classList.add('playing');
    } else {
      audio.pause();
      key.classList.remove('playing');
    }
  });
});

如何为击键和单击事件使用相同的功能？

1 个答案: