javascript - 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 回调将事件作为参数，因此如果您想阻止事件传播(阻止当前事件在捕获和冒泡阶段进一步传播)，您可以使用 ( event) => event.stopPropagation(); 就像这里:

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

  event.stopPropagation();

});