EventListener in JavaScript

Question

I'm a beginner with Javascript and I'm stuck at something. Here's the code:

const button = document.querySelector('button')

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

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

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

Notice: the whole wrapper is displayed to none, and the .popup-box is inside if the .popup-wrapper div (in case you didn't include that already:D)

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

  popupWrapper.style.display = 'block';

});

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

  popupWrapper.style.display = 'none';

});

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

  popupWrapper.style.display = 'none';

});

What I want to do is whenever I click anywhere on the wrapper space around the .popup-box itself, the whole wrapper (with the box) gets displayed to none, but when I click on .popup-box itself nothing happens. What do I write?

Please be aware that you can put the code into a snippet to make it more readable. Click the <> symbol when editing. — evolutionxbox
– evolutionxbox, Commented Jan 12, 2020 at 19:47
addEventListener callback takes an event as its argument, so if you want to prevent event's propagation, you can use (event) => event.stopPropagation(); — bonusrk
– bonusrk, Commented Jan 12, 2020 at 19:50

bonusrk · Accepted Answer · 2020-01-12 19:51:33Z

3

addEventListener callback takes an event as it's argument, so if you want to prevent event's propagation (prevents further propagation of the current event in the capturing and bubbling phases), you can use (event) => event.stopPropagation(); like here:

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

  event.stopPropagation();

});

answered Jan 12, 2020 at 19:51

bonusrk

7275 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

EventListener in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related