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?

Answer 1

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

});