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

});