单击事件不会在 chrome 中的音频元素上触发

Question

我的 DOM 中有一个音频元素。 我执行了以下命令，似乎 click 事件由于某种原因没有触发：

$0.addEventListener('click',function(){console.log('click')});

当我尝试添加鼠标悬停处理程序时，它按预期工作：

$0.addEventListener('mouseover',function(){console.log('mouseover')});

在 Firefox 中，点击事件可以正常工作。 有任何想法吗？

Answer 1

“如果用户代理通过显示对媒体元素的控件向用户公开用户界面，则用户代理应在用户代理与此界面交互时抑制任何用户交互事件。（例如，如果用户单击视频的播放控制、mousedown 事件等不会同时在页面上的元素上触发。）”——来自Web 超文本应用技术工作组

它旨在不起作用，因此“恶意”网站无法捕获用户对媒体控件的点击。 所以在一般情况下不建议绕过它； 但如果你真的需要，你必须遵循一些技巧，比如以编程方式将音频元素包装在具有更高 z-index 的透明元素中（注意 z-indices 和透明度）并捕获所述元素的点击。

Answer 2

直接用，是不行的。

您需要在它周围添加一个 shimified div 来获取点击事件。

Javascript：

function onAudioElClick() {
    console.log('click');
}

HTML：

<div onclick="onAudioElClick()" style="position:absolute; z-index:9999; width:300px; height:30px;"></div>
<audio></audio>`

Answer 3

mouseover有效但click无效，这很奇怪。

如果您将audio元素包装到div等其他元素中，那么您可以处理click事件：

JavaScript：

<div>
    audio element
    <audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay></audio>
</div>

HTML：

var el = document.querySelector("div");
el.addEventListener('click',function(){console.log('click')});