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>