单击内部div也单击外部div

Question

我有一个称为paragraph的外部div和两个名为word的内部div。我还从另一个SO帖子获得了JS中的自定义音频播放功能：

<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。但是，当我单击其中一个单词divs时，它会同时播放paragraph.mp3和word.mp3。我该如何阻止这种情况的发生？

Answer 1

如果使用addEventListener（）而不是嵌入式onclick，则可以在传递给它的事件对象上调用stopPropagation（），以防止事件冒泡。

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

Answer 2

您可以通过将以下代码行添加到playsound函数中来停止事件冒泡

const e = window.event;
 
e.cancelBubble = true;

if (e.stopPropagation) {
  e.stopPropagation();
}

这将阻止JavaScript的事件冒泡和传播

Answer 3

对于CSS按钮中嵌入★链接的类似问题，我使用了更简单的方法。我在内部onClick函数之前将全局变量 embedDiv 设置为TRUE。在外部onClick函数中，如果 embedDIV 为true，则跳过代码，并将 embedDiv 重置为FALSE。

<script>
var embedDiv = false;

function tm(wikiPlace) { 
      if(!embedDiv) { place(wikiPlace); alert("( " + wikiPlace + " ) -- " + tym); } 
      embedDiv = false;
}
</script>

<div onclick="tm('Argentina')">Argentina<span 
     onclick="embedDiv=true;go('Argentina')">&starf;</span></div>

Time-Place-Pronounce