我有一个名为 paragraph
的外部 div 和两个名为 word
的内部 div。我在 JS 中还有一个自定义音频播放功能,这是我从另一篇 SO 帖子中获得的:
<div class="paragraph" onclick="playSound('this, paragraph.mp3');">
<div class="word" onclick="playSound('this, word1.mp3');">Word1</div>
<div class="word" onclick="playSound('this, word2.mp3');">Word2</div>
</div>
function playSound(el,soundfile) {
if (el.mp3) {
if(el.mp3.paused) el.mp3.play();
else el.mp3.pause();
} else {
el.mp3 = new Audio(soundfile);
el.mp3.play();
}
}
当我点击段落 div 时,它会完美地播放 paragraph.mp3
。但是,当我单击其中一个单词 div 时,它会同时播放 paragraph.mp3
和 word.mp3
。我怎样才能阻止这种情况发生?
最佳答案
如果您使用 addEventListener() 而不是内联 onclick,您可以在传递给它的事件对象上调用 stopPropagation() 以防止事件冒泡。
word1Div.addEventListener('click', function(event) {
event.stopPropagation();
playSound(this, 'word1.mp3');
}
关于javascript - 单击内部 div 时也会单击外部 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52582403/