Question

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

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

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

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

在Firefox中，点击事件正常运行。有什么想法吗？

Answer 1

”如果用户代理通过显示媒体元素上的控件来向用户展示用户界面，则当用户代理与此界面进行交互时，用户代理应禁止任何用户交互事件。（例如，如果用户点击视频的播放控件时，鼠标按下事件等不会同时在页面上的元素上触发。）” —来自The Web Hypertext Application Technology Working Group

它原本打算不起作用，所以“恶意”网站无法捕获用户对媒体控件的点击。因此，一般情况下不建议绕开它。但是如果确实需要，则必须遵循一些技巧，例如以编程方式将音频元素包装到具有较高z索引的透明元素中（请注意z索引和透明度）并捕获所述元素的点击。

Answer 2

直接，它不会工作。

你需要添加一个shimified div aroudn来获取点击事件。

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

https://jsfiddle.net/b3sbmqpj/

点击事件不会触发Chrome中的音频元素

3 个答案: