单击内部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完美。 然而，当我点击这个词的div一个里面，它同时扮演这两种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是真实和复位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>

时间地点发音