javascript - 悬停时播放音频文件

Question

我为我的论坛制作了这个脚本，我想知道是否有人可以指导我如何让浏览器在用户将鼠标悬停在类 style113 上时播放音频文件，但它必须给他们一个警告警报，显示“音频即将播放”，如果他们在警报上按确定，则应该播放，如果他们按取消，则不应播放。我怎样才能实现这个目标？这是我到目前为止的脚本:

my script has been removed 

Answer 1

您可以使用以下代码:

var elems = document.getElementsByClassName("style113");
for(i in elems) {
    elems[i].addEventListener("mouseover", function() {
        if(confirm(" %%% CONFIRMATION MESSAGE %%% ")) {
            // %%% CODE TO PLAY SOUND %%%
        }
    });
}

它的作用:

1. 循环 style113 类的元素
2. 向事件 mouseover 的每个元素添加一个事件监听器
3. 在每个事件监听器中，创建一个 confirm()弹出窗口(有两个按钮，一个确认，一个取消)
4. 如果confirm()方法返回true(如果单击肯定按钮)，则播放声音

Working example on JSFiddle

<小时/>

更新根据下面评论中的OP请求，您可以将此代码添加到for循环中的特定代码中:

document.getElementsByClassName('style113')[x].addEventListener("mouseover", function() {
    if(confirm("audio is about to play")) {
        // %%% CODE TO PLAY SOUND %%%
    }
});

我还建议您通过更好的缩进实践来清理源代码。另外，避免发出太多 DOM 请求(例如，重复的 document.getElementsByClassName())，而是查看 caching DOM requests .