Javascript点击监听器，但不触发子元素？

Question

我正在尝试转向使用普通的旧式 Javascript(由于速度问题，不再使用 jQuery)。我需要触发某物上的单击事件，然后在主元素上切换一个类。这是我所拥有的:

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.target.classList.toggle("active");
});

https://jsfiddle.net/h12o073L/17/

我遇到的问题是，我只希望主要元素添加类 - 而不是子元素!目前，如果我点击其中一个价格，则会获取 .active 类(而我希望 .wrapper-dropdown 元素添加该类)

我必须承认 - 我对 jQuery 变得非常懒惰，所以我可能错过了一些简单的东西;)

Answer 1

您希望仅将 .active 类添加到 .wrapper-dropdown 您可以使用它始终引用的 currentTarget您附加事件处理程序的元素。

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.currentTarget.classList.toggle("active");
});