JavaScript 中的事件监听器

Question

我是 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-wrapper div 则 .popup-box 在里面（如果你还没有包含它：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本身时，什么也没有发生。 我写什么？

Answer 1

addEventListener 回调将事件作为参数，所以如果你想阻止事件的传播（ prevents further propagation of the current event in the capturing and bubbling phases ），你可以使用(event) => event.stopPropagation(); 像这儿：

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

  event.stopPropagation();

});