Question

我有4个按钮，每个按钮在按下时都会播放自己的音乐。我需要一种可以在单击另一个按钮时使一种音乐暂停播放的功能，这样我就不会让所有4种音乐彼此叠加播放。我找到了以下代码来解决它：

document.addEventListener('play', function(event){
var allAudios = document.getElementsByTagName('audio');
debugger;
for(var i = 0; i<allAudios.length; i++){
    if(allAudios[i] != event.target){
        allAudios[i].pause();
    }
}
}, true);

但是，我最后并不了解true的确切目的。我了解它告诉事件侦听器使用捕获事件，但是当我在事件目标的父级上设置警报时，事件的顺序会从事件目标触发到其父级（冒泡），并从父级到事件目标（捕获）。是否有人对此现象有解释，为什么在这种情况下首先需要useCapture？

如果有人需要参考，我会从该网站获得代码。

https://teamtreehouse.com/community/auto-stop-when-playing-other-files

谢谢

Answer 1

tl; dr ：因为play事件不会冒泡，并且您想收听（捕获）document中发生的所有播放事件。

useCapture使您可以捕获通常不会冒泡的事件。在您引用的脚本的上下文中，您正在监听play事件。 play事件不会像其他事件那样冒泡，您想捕获（监听）play中发生的所有document事件，因此您启用useCapture捕获所有play事件，以便您知道何时暂停所有其他音乐播放。

如何知道何时需要将useCapture设置为true：

访问Event Reference page on MDN。

单击您要使用的事件。

在顶部的“常规信息”下，查看“气泡”是设置为“是”还是“否”。


如果事件没有冒泡，并且您正在监听的元素（触发事件的元素除外）上的事件，请将use capture设置为true。

来源：https://gomakethings.com/when-to-use-use-capture-in-your-event-listeners/

修改 useCapture的工作方式的更多详细信息：Unable to understand useCapture parameter in addEventListener

在addeventListener中使用useCapture的理由？

1 个答案: