javascript - 单击内部 div 时也会单击外部 div

Question

我有一个名为 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。我怎样才能阻止这种情况发生？

Answer 1

如果您使用 addEventListener() 而不是内联 onclick，您可以在传递给它的事件对象上调用 stopPropagation() 以防止事件冒泡。

word1Div.addEventListener('click', function(event) {
    event.stopPropagation();
    playSound(this, 'word1.mp3');
}