Работает только половина скрипта :(

Question

Недавно начал изучать JS, не понимаю почему не выполняется данный код

let sliderItem = document.querySelectorAll('.works__slider--item'),
  popup = document.querySelectorAll('.works__popup'),
  closeBtn = document.querySelectorAll('.works__popup--close');

for (let i = 0; i < sliderItem.length; i++) {

  /* Открытие окна */

  sliderItem[i].addEventListener('click', () => {
    popup[i].style.display = "flex";
  });

  /* Закрытие окна */

  closeBtn[i].addEventListener('click', () => {
    popup[i].style.display = "none";
  });

};

.works__popup {
  display: none;
}

<div class="works__slider--item">
  <div tabindex="0" class="works__slider--link">Lorem, ipsum.</div>

  <!-- Popup -->

  <div class="works__popup">
    <div class="works__popup--inner">
      <div tabindex="0" class="works__popup--close">X</div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, ratione?
    </div>
  </div>
</div>

Срабатывает только первая часть скрипта, т.е. модальное окно всплывает, но по нажатию на кнопку закрытия, не закрывается. Не понимаю почему так происходит, подскажите пожалуйста.

Answer 1

В пользовательском интерфейсе и в частности в JavaScript есть такая вещь как погружение и всплытие событий. С момента наступления события, оно сначала проходит с самого верхнего элемента до самого нижнего, а затем обратно поднимается наверх.

Стадия погружения события как правило проходит незаметно, а вот на стадии всплытия как раз начинают выполнятся все обработчики событий. И в данном случае у вас при закрытии сначала выполняется закрытие окна и следом по всплытию тут же выполняется открытие окна.

let parent = document.getElementById('parent'),
    child = document.getElementById('child');

parent.addEventListener('click', () => {
  console.log("клик по верхнему");
});

child.addEventListener('click', () => {
  console.log("клик по нижнему");
});

<div id="parent">
  -> клик по верхнему <-
  <div id="child">
     -> клик по нижнему всплывет наверх <-
  </div>
</div>

Для остановки всплытия служит метод event.stopPropagation();.

let sliderItem = document.querySelectorAll('.works__slider--item'),
  popup = document.querySelectorAll('.works__popup'),
  closeBtn = document.querySelectorAll('.works__popup--close');

for (let i = 0; i < sliderItem.length; i++) {

  /* Открытие окна */

  sliderItem[i].addEventListener('click', () => {
    popup[i].style.display = "flex";
  });

  /* Закрытие окна */

  closeBtn[i].addEventListener('click', (event) => {
    popup[i].style.display = "none";
    event.stopPropagation();
  });

};

.works__popup {
  display: none;
}

<div class="works__slider--item">
  <div tabindex="0" class="works__slider--link">Lorem, ipsum.</div>

  <!-- Popup -->

  <div class="works__popup">
    <div class="works__popup--inner">
      <div tabindex="0" class="works__popup--close">X</div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, ratione?
    </div>
  </div>
</div>

БЛОГ НА HUSL

Работает только половина скрипта :(

Ответы (1 шт):