Нажатие на внутренний div также включает внешний div

Question

У меня есть внешний div, называемый paragraph, и два внутренних div, называемые word.У меня также есть пользовательская функция воспроизведения звука в 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

Вы можете остановить всплывающее окно события, добавив эти строки кода в функцию воспроизведения звука

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

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

Это остановит распространение и распространение событий JavaScript

Answer 2

Я использовал более простой подход для аналогичной проблемы со встроенными ★ ссылками в моих кнопках CSS.Я установил для глобальной переменной embedDiv значение TRUE, предшествующее моей внутренней функции onClick.Во внешней функции 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>

Место и время произнесения

Answer 3

Если вы используете addEventListener () вместо встроенного onclick, вы можете вызвать stopPropagation () для объекта события, переданного ему, чтобы предотвратить всплытие события.

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