Javascript onclick一个内部div也onclick一个外部div

我有一个名为

段落

的外部div和两个名为

单词

的内部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();
    }
}

字1
字2
功能播放声音（el，声音文件）{
如果（el.mp3）{
如果（el.mp3.paused）el.mp3.play（）；
else el.mp3.pause（）；
}否则{
el.mp3=新音频（声音文件）；
el.mp3.play（）；
}
}

---

当我单击段落div时，它会完美地播放

段落.mp3

。但是，当我单击其中一个word div时，它会同时播放

段落.mp3

和

word.mp3

。如何阻止这种情况发生？

如果使用addEventListener（）而不是内联onclick，则可以对传递给它的事件对象调用stopPropagation（），以防止事件冒泡

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

---

如果使用addEventListener（）而不是内联onclick，则可以对传递给它的事件对象调用stopPropagation（），以防止事件冒泡

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

---

通过将这些代码行添加到playsound函数中，可以停止事件冒泡

const e=window.event；
e、 取消气泡=真；
如果（如停止播放）{
e、 停止传播（）；
}

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

const e=window.event；
e、 取消气泡=真；
如果（如停止播放）{
e、 停止传播（）；
}

对于嵌入式&starf；我的CSS按钮中的链接。在内部onClick函数之前，我将全局变量embeddediv设置为TRUE。在外部onClick函数中，如果embeddediv为true，则跳过代码，并将embeddediv重置为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>

var-embedDiv=false；
功能tm（wikiPlace）{
如果（！embeddediv）{place（wikiPlace）；alert（（“+wikiPlace+”）--“+tym）；}
embedDiv=false；
}
阿根廷&starf；

---

对于嵌入式&starf；的类似问题，我使用了一种更简单的方法；我的CSS按钮中的链接。在内部onClick函数之前，我将全局变量embeddediv设置为TRUE。在外部onClick函数中，如果embeddediv为true，则跳过代码，并将embeddediv重置为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>

var-embedDiv=false；
功能tm（wikiPlace）{
如果（！embeddediv）{place（wikiPlace）；alert（（“+wikiPlace+”）--“+tym）；}
embedDiv=false；
}
阿根廷&starf；

---

谢谢您的回答。然而问题是，我在一个段落中有数百个单词，都有不同的音频链接。那么，我是否必须为每个单词添加此代码，或者是否有自动添加的方法？您可以使用querySelectorAll（）或getElementsByClassName（）选择所有单词元素，并在循环中添加事件侦听器（或使用forEach（）方法）。非常感谢您的帮助。我真的很感激。谢谢你的回答。然而问题是，我在一个段落中有数百个单词，都有不同的音频链接。那么，我是否必须为每个单词添加此代码，或者是否有自动添加的方法？您可以使用querySelectorAll（）或getElementsByClassName（）选择所有单词元素，并在循环中添加事件侦听器（或使用forEach（）方法）。非常感谢您的帮助。我真的很感激。非常感谢这一切成功了！然而，当我使用您的精确代码时，它告诉我“

ReferenceError:e未定义”

”错误，当我删除

if（！e）

部分时，它工作得非常好。那部分有必要吗？我实际上更新了，因为我以为你也通过了比赛。所以，是的，你很好：）非常感谢这项工作！然而，当我使用您的精确代码时，它告诉我“

ReferenceError:e未定义”

”错误，当我删除

if（！e）

部分时，它工作得非常好。那部分有必要吗？我实际上更新了，因为我以为你也通过了比赛。所以是的，你很好：）