CODEWITHSUNDEEP
javascripteventsdom-events
Ali Abdallah
Ali Abdallah

Reputation: 39

EventListener in JavaScript

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?

Upvotes: 0

Views: 136

Answers (1)

bonusrk
bonusrk

Reputation: 717

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();

});

Upvotes: 3

Related Questions