我有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

谢谢

最佳答案

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

关于javascript - 在addeventListener中使用useCapture的原因?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52409223/

10-10 23:27