EventListener в JavaScript - PullRequest
Новая
       33

EventListener в JavaScript

0 голосов
/ 12 января 2020

Я новичок с Javascript, и я застрял в чем-то. Вот код: 

const button = document.querySelector('button')

const popupWrapper = document.querySelector('.popup-wrapper')

const popBox = document.querySelector('.popup-box')

const close = document.querySelector('.popup-close')

Обратите внимание: вся оболочка не отображается, а .popup-box находится внутри, если div .popup-wrapper (если вы его не включили уже: D) 

button.addEventListener('click', () =>{ 

  popupWrapper.style.display = 'block';

});

close.addEventListener('click', () => {

  popupWrapper.style.display = 'none';

});

popupWrapper.addEventListener('click', () => {

  popupWrapper.style.display = 'none';

});

То, что я хочу сделать, это то, что всякий раз, когда я щелкаю в любом месте пространства обертки вокруг самого .popup-box, вся обертка (с полем) не отображается, но когда я нажимаю на .popup-box, ничего не происходит. Что я пишу?

1 Ответ

3 голосов
/ 12 января 2020

Функция обратного вызова addEventListener принимает событие в качестве аргумента, поэтому, если вы хотите предотвратить распространение события (prevents further propagation of the current event in the capturing and bubbling phases), вы можете использовать (event) => event.stopPropagation(); как здесь: 

popupBox.addEventListener('click', (event) => {

  event.stopPropagation();

});
...