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