如何给div元素绑定click事件，点击时播放对应data-key的关联音频

开发者阿泽

2026-10-7

代码调整方案

需要修改两处核心逻辑：

修正点击播放函数的匹配规则，让它可以根据当前点击的div的data-key值找到对应的关联音频
单独为所有.key元素绑定click事件，原代码中误将点击处理函数写在了transitionend事件的参数位，不会触发点击效果

修改后完整JS代码

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

// 修正后的点击播放处理函数
function playcclickAudio(e) {
    // 读取当前点击div绑定的data-key值
    const targetKey = this.dataset.key;
    // 匹配相同data-key值的音频元素
    const audio = document.querySelector(`audio[data-key="${targetKey}"]`)
    if (!audio) return;
    
    this.classList.add('playing');
    audio.currentTime = 0;
    audio.play();
}

const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => {
    // 保留原有过渡结束事件
    key.addEventListener('transitionend', removeTransition);
    // 新增绑定点击事件
    key.addEventListener('click', playcclickAudio);
});
window.addEventListener('keydown', playSound);