React中如何监听<audio>标签及其控件的点击事件？

当audio标签启用controls属性后，浏览器自带的控件属于Shadow DOM内容，直接绑定的onClick事件无法响应控件点击；同时如果audio元素的可点击区域被样式限制，空白区域的点击也可能失效。以下是几种可行的解决方法：

方法1：父容器事件委托 #

将audio包裹在一个尺寸匹配的容器中，给容器绑定点击事件，利用事件冒泡特性捕获所有区域的点击：

<div 
  onClick={() => console.log('audio区域被点击')}
  style={{ width: 'calc(100% - 50px)', height: '30px' }}
>
  <audio
    ref={audioRef}
    className={'d-flex flex-grow-1'}
    style={{ height: '100%', width: '100%' }}
    src={source}
    controls={true}
    autoPlay={false}
  />
</div>

方法2：监听媒体操作事件 #

如果只需关注控件的功能操作（而非单纯点击），可以直接绑定audio的媒体专属事件，覆盖大部分控件交互场景：

<audio
  ref={audioRef}
  className={'d-flex flex-grow-1'}
  style={{ height: '30px', width: 'calc(100% - 50px)' }}
  src={source}
  controls={true}
  autoPlay={false}
  onPlay={() => console.log('播放按钮被点击')}
  onPause={() => console.log('暂停按钮被点击')}
  onSeeked={() => console.log('进度条被拖动')}
  onVolumeChange={() => console.log('音量控件被操作')}
/>

方法3：捕获阶段事件监听 #

通过ref获取audio元素，在组件挂载时添加捕获阶段的点击事件监听，可直接捕获Shadow DOM内控件的点击：

import { useEffect, useRef } from 'react';

function AudioPlayer({ source }) {
  const audioRef = useRef(null);

  useEffect(() => {
    const handleClick = () => console.log('audio或控件被点击');
    audioRef.current?.addEventListener('click', handleClick, true);

    // 组件卸载时移除监听
    return () => {
      audioRef.current?.removeEventListener('click', handleClick, true);
    };
  }, []);

  return (
    <audio
      ref={audioRef}
      className={'d-flex flex-grow-1'}
      style={{ height: '30px', width: 'calc(100% - 50px)' }}
      src={source}
      controls={true}
      autoPlay={false}
    />
  );
}

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