JavaScript 中的事件监听器答案

【问题标题】：EventListener in JavaScriptJavaScript 中的事件监听器
【发布时间】：2020-01-12 19:43:07
【问题描述】：

我是 Javascript 的初学者，但我遇到了一些问题。代码如下：

const button = document.querySelector('button')

const popupWrapper = document.querySelector('.popup-wrapper')

const popBox = document.querySelector('.popup-box')

const close = document.querySelector('.popup-close')

注意：整个 wrapper 不显示，如果 .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 本身时，没有任何反应。我要写什么？

【问题讨论】：

请注意，您可以将代码放入 sn-p 以使其更具可读性。编辑时点击<>符号。
addEventListener 回调以事件为参数，所以如果你想阻止事件的传播，你可以使用(event) => event.stopPropagation();

标签： javascript events dom-events

【解决方案1】：

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

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

  event.stopPropagation();

});

【讨论】：