Javascript 如何为 HTML 音频元素绑定单击鼠标按下事件

发布于05月28日

在下面的共享stackblitz示例中，我为音频元素包装绑定了mousedown和click事件，该事件未被触发.我需要执行自己的操作，并执行音频元素单击.

无法找到此 case 的任何解决方案，对此有任何 idea 都将不胜感激.

<span id="test">
<audio controls>
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<br>
</span>
<script>
document.querySelector('#test').addEventListener('click', function() { console.log ('click called')});
document.querySelector('#test').addEventListener('mousedown', function() { console.log ('mousedown called')});

样本:https://stackblitz.com/edit/9gw8e5-qujbbj?file=index.html,index.js

任何关于这方面的建议，都可以实现这一行为.在MDN中也找不到关于此的任何建议(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio).

推荐答案

try 了以下在figure HTML元素中包装的方法，这是audio元素之上的替代解决方案instead of wrapping a separate element.希望将音频元素包装在内联/块 node 中的用户.

```css
figure {
    display: block;
    outline: none;
    position: relative;
    margin: 0;
    padding: 0;
}

figure:after {
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: default;
    display: block;
    background: transparent;
}

```html
<span id="test">
  <audio controls>
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
  </audio>
</span>

样本:https://stackblitz.com/edit/9gw8e5-dswrh3?file=index.html,index.js

上面的示例使鼠标向下并单击操作适用于音频元素.

希望它能帮助别人..！