如何知道何时单击 <audio>

Question

在我的 React 代码中我有这个音频：

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

当用户点击其中一个控件，或者点击没有控件的空间时，我需要得到通知。 我尝试添加一个

onClick

属性，但它从未被调用：

<audio
  ref={audioRef}
  className={'d-flex flex-grow-1'}
  style={{ height: '30px', width: 'calc(100% - 50px)' }}
  src={source}
  controls={true}
  autoPlay={false}
  onClick={() => console.log('clicked!!!')}  // clicks do NOT trigger this onClick
>

我如何知道音频标签或其任何控件何时被单击？

Answer 1

标签本身的 onClick 事件可能不会被触发，因为音频控件由浏览器管理，并且在某种程度上独立于元素运行。 但是，（也许可以帮助）您可以使用包装元素来检测点击来捕获点击：

• 将元素包裹在一个或另一个容器中
• 将 onClick 事件附加到此包装器。

容器内的任何点击（包括音频控件）都会触发该事件。

<div
  onClick={() => console.log('Audio clicked!')}
  style={{ display: 'flex', alignItems: 'center' }}
>
  <audio
    ref={audioRef}
    className={'d-flex flex-grow-1'}
    style={{ height: '30px', width: 'calc(100% - 50px)' }}
    src={source}
    controls={true}
    autoPlay={false}
  />
</div>