在Chrome浏览器中，音频元素的点击事件无法触发。

Question

我在文档对象模型中拥有一个音频元素。 我执行了下面的命令，但似乎由于某种原因单击事件没有触发：

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

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

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

在Firefox中，点击事件可以正常工作。有什么想法？

- Mor Ohana

Answer 1

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

这是为了防止“恶意”网站捕获用户对媒体控件的点击而意図的。因此，在一般情况下不建议绕过它；但如果确实需要，可以像编程包装具有更高z-index的透明元素中的音频元素一样遵循某些黑客方式（注意z-index和透明度），并捕获所述元素的点击事件。

- Salim Mahboubi

---

希望这是实现此要求的类似方式。https://stackblitz.com/edit/9gw8e5-jo8yah?file=index.html,index.js - INDRA JITH

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>`

- gauravmuk

---

我其实不想改变HTML。你是说这是Chrome的一个bug吗？ - Mor Ohana

这是一个程序相关的内容。 - gauravmuk

为什么？没有记录音频元素不会触发点击事件，而在Firefox中它可以正常工作... - Mor Ohana

它在Firefox中不再起作用，但仍未记录它不应该这样做。 - Stijn Bollen

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')});

https://jsfiddle.net/b3sbmqpj/

- Arkadiusz Wieczorek

---

删除无人问津的文本，添加控件属性，这样您的点击事件就不会被触发了。 - Stijn Bollen