如何在子元素点击事件之前执行父元素点击事件

Question

当我们点击子元素时，会先触发子元素的点击事件函数，然后再触发父元素的点击事件函数。如何才能在子点击事件函数之前执行父点击事件函数呢？请建议。

Answer 1

var elements = document.querySelectorAll('.PosleNazatia');

function toggleElement(elementId) {
  var elements = document.querySelectorAll('.PosleNazatia');
  var element = document.querySelector(elementId);

  if (element.style.display === 'block') {
    element.style.display = "none";
    return
  }
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "none";
  }

  element.style.display = "block";
}

document.addEventListener("DOMContentLoaded", function() {
  var buttons = document.getElementsByClassName("ContainerForMenu");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
      var target = this.getAttribute("data-target");
      toggleElement(target);
    });
  }
});

<div class="KnopkaWmenu"> 
  <button class="ContainerForMenu"  data-target="#element3">
      <div class="houli">
          <object class="IconFORMenuu" data="photo/Group 1.svg" type="image/svg+xml"></object>
          <span class="textForButtonMenu">
            <a href="#" class="LinkForButton">Business</a>
          </span>
          
        </div>
        <i class="IconForButton"></i>
  </button>
  <div class="PosleNazatia" id="element3">
    <a class="LinkForMenu" href="#">
        <span class="textForLink">GameStop</span>
    </a>
    <a class="LinkForMenu" href="#">
        <span class="textForLink">Moderna</span>
    </a>
    <a class="LinkForMenu" href="#">
        <span class="textForLink">Pfizer</span>
    </a>
    <a class="LinkForMenu" href="#">
        <span class="textForLink">Johnson & Johnson</span>
    </a>
    <a class="LinkForMenu" href="#">
        <span class="textForLink">AstraZeneca</span>
    </a>
    <a class="LinkForMenu" href="#">
        <span class="textForLink">Walgreens</span>
    </a>
    <a class="LinkForMenu" href="#">
        <span class="textForLink">Best Buy</span>
    </a>
    <a class="LinkForMenu" href="#">
        <span class="textForLink">Novavax</span>
    </a>
    <a class="LinkForMenu" href="#">
        <span class="textForLink">SpaceX</span>
    </a>
    <a class="LinkForMenu" href="#">
        <span class="textForLink">Tesla</span>
    </a>
</div>
</div>