Javascript点击监听器，但是不会在子元素上触发吗？

Question

我正在尝试使用普通的旧Javascript（由于速度问题，不再使用jQuery）。 我需要触发某事的click事件，然后在主元素上切换一个类。 这是我所拥有的：

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 ， .wrapper-dropdown将始终引用附加事件处理程序的元素。

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

Answer 2

您可以在事件监听器中使用this功能：

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

}）;

Answer 3

您应该使用.closest()函数选择目标.wrapper-dropdown 。

Element.closest()方法返回与参数中给定的选择器匹配的当前元素（或当前元素本身）的最接近祖先。 如果没有这样的祖先，则返回null 。

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

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

 <div id="dd-price-from" class="wrapper-dropdown" tabindex="1"> <span>Price From</span> <ul class="dropdown"> <li data-what="20"><a href="#">€20</a></li> <li data-what="50"><a href="#">€50</a></li> </ul> </div>