如何监听<audio>元素的click事件？addEventListener代码失效求助

当你给带controls属性的

下面提供几种可行的解决方法：

方法一：监听播放/暂停状态事件（推荐，适配原生控制逻辑） #

如果你的需求只是监听音频播放状态变化，直接用play和pause事件更准确，不需要依赖点击行为：

<audio controls>
  <source src="horse.ogg" >
  <source src="horse.mp3" >
您的浏览器不支持 audio 元素。
</audio>
    
<script>
    console.log(1);
    const audioElement = document.querySelector('audio')

    audioElement.addEventListener('play', () => {
        console.log('音频开始播放');
    });
    
    audioElement.addEventListener('pause', () => {
        console.log('音频暂停播放');
    });
</script>

方法二：通过事件委托捕获控制区域点击 #

利用事件委托监听全局click，判断点击目标是否属于audio控制栏的一部分：

<audio controls>
  <source src="horse.ogg" >
  <source src="horse.mp3" >
您的浏览器不支持 audio 元素。
</audio>
    
<script>
    console.log(1);
    const audioElement = document.querySelector('audio')

    document.addEventListener('click', (e) => {
        if (e.target.closest('audio') === audioElement) {
            console.log('============ 点击了音频控制区域 ============');
        }
    });
</script>

方法三：自定义控制栏（完全掌控交互） #

去掉原生controls属性，自己实现控制按钮，这样就能直接绑定click事件：

<div>
  <audio id="myAudio">
    <source src="horse.ogg" >
    <source src="horse.mp3" >
  您的浏览器不支持 audio 元素。
  </audio>
  <button id="playBtn">播放/暂停</button>
</div>
    
<script>
    const audioElement = document.getElementById('myAudio');
    const playBtn = document.getElementById('playBtn');

    playBtn.addEventListener('click', () => {
        if (audioElement.paused) {
            audioElement.play();
            playBtn.textContent = '暂停';
        } else {
            audioElement.pause();
            playBtn.textContent = '播放';
        }
        console.log('============ 点击了自定义控制按钮 ============');
    });
</script>

内容的提问来源于stack exchange，提问作者NummSix