将JS鼓组从键盘触发改为鼠标点击触发的问题排查

嘿，我明白你遇到的问题了——把keydown改成click后没反应，核心原因是鼠标点击事件的事件对象里根本没有keyCode属性，而你的playSound函数完全依赖e.keyCode去匹配对应的音频和鼓键元素，自然找不到目标，直接就return退出了，啥效果都出不来。

问题根源拆解 #

原来的keydown事件中，浏览器会给事件对象e带上keyCode（比如按A键就是65），你用这个值去匹配data-key属性的元素完全没问题。但换成click事件时，e.keyCode是undefined，这就导致document.querySelector(audio[data-key="${e.keyCode}"])返回null，函数直接终止执行，播放动画和音效的逻辑根本没机会跑起来。

修复方案（两种可选） #

下面给你两种简单的修复方式，你可以根据需求选：

方案1：给每个鼓键单独绑定点击事件（推荐）

这种方式逻辑更清晰，而且只在点击鼓键时触发，不会误触其他区域。修改你的JS代码如下：

function playSound(keyCode) {
  const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${keyCode}"]`);
  if (!audio) return; // 找不到音频就终止
  audio.currentTime = 0; // 重置播放进度，支持连续点击
  audio.play();
  key.classList.add('playing');
}

function removeTransition(e) {
  if (e.propertyName !== 'transform') return; // 只处理transform的过渡结束事件
  this.classList.remove('playing');
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => {
  key.addEventListener('transitionend', removeTransition);
  // 给每个鼓键绑定点击事件
  key.addEventListener('click', () => {
    // 从当前点击的鼓键上获取data-key值
    const keyCode = key.getAttribute('data-key');
    playSound(keyCode);
  });
});

// 可选：保留键盘触发功能，如果你还想用按键玩的话
window.addEventListener('keydown', (e) => {
  playSound(e.keyCode);
});

思路说明：把playSound改成接收keyCode参数的通用函数，点击事件中直接从当前鼓键元素拿到data-key值传进去，不管是键盘还是鼠标触发，都能复用同一个播放逻辑。

方案2：让playSound兼容两种事件类型

如果不想拆分函数，也可以直接修改playSound，让它自动判断事件类型并获取对应的keyCode：

function playSound(e) {
  let keyCode;
  // 判断当前是点击事件还是键盘事件
  if (e.type === 'click') {
    // 点击事件从触发元素拿data-key
    keyCode = e.target.getAttribute('data-key');
  } else {
    // 键盘事件用自带的keyCode
    keyCode = e.keyCode;
  }

  const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${keyCode}"]`);
  if (!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing');
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => {
  key.addEventListener('transitionend', removeTransition);
  // 给每个鼓键绑定点击事件
  key.addEventListener('click', playSound);
});

// 保留键盘触发
window.addEventListener('keydown', playSound);

注意：别直接给window绑定click事件，不然点击页面任何地方都会触发，必须给每个.key元素单独绑定。

额外检查点 #

修复后如果还是没音效，记得确认：

• 每个.key的data-key和对应audio的data-key完全一致
• 音频文件的src路径正确（比如clap.wav和HTML文件在同一目录下）

内容的提问来源于stack exchange，提问作者Canto.III