<audio> 元素上的 onclick 事件答案

【问题标题】：onclick event on <audio> element<audio> 元素上的 onclick 事件
【发布时间】：2015-12-13 23:40:57
【问题描述】：

给定以下标记：

<audio controls onclick="alert('hi')">
    <source src="/url/track.mp3" type="audio/mpeg">  
</audio>

我没有从 onclick 事件中得到任何响应。似乎所有的 onclick 事件都绑定到播放器控件。

我的目标是在用户点击“播放”时运行一个单独的函数。

【问题讨论】：

标签： javascript jquery audio onclick element

【解决方案1】：

onplay 属性就是您要查找的。p>

<audio onplay="myFunction()">...</audio>

这里有一些关于它的article on w3schools

【讨论】：

【解决方案2】：

您可以在音频元素上放置一个不可见的 div：

<script>
    function catchClick(){
        alert("hi");
    }
</script>

<div onclick="catchClick()" style="position:absolute;z-index:1;width:300px;height:30px;">
</div>
<audio controls>
    <source src="/url/track.mp3" type="audio/mpeg">
</audio>

然后，在 catchClick 函数中，您可以通过此方法 How to simulate a mouse click using javascript 将鼠标点击传递给音频元素

【讨论】：