函數參數不適用於.classList.add

Question

我創建了一個簡單的函數來刪除和添加類，但是我無法使其正常工作，下面是要測試的html，它需要正常工作，以便當鼠標進入'.dropdown'時#myDropdown會將一個類添加到它“顯示”，當鼠標離開時，該類將被刪除：

 const dropDown = document.querySelector('.dropdown'); const dropDownList = dropDown.querySelector('#myDropdown'); const classToToggle = 'show'; dropDown.addEventListener("mouseenter", toggleClass(dropDownList, classToToggle)); dropDown.addEventListener("mouseleave", toggleClass(dropDownList, classToToggle)); function toggleClass(target, className) { if(target.classList.contains(className)) { target.classList.remove(className); } else { target.classList.add(className); } } 

 <div class="dropdown"> <a href="javascript:void(0)" class="dropbtn" style="outline: none;">Dropdown <i class="fas fa-chevron-down"></i></a> <div id="myDropdown" class="dropdown-content"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> </div> </div> 

即使當我在console.log中記錄“ className”和“ target”參數時，函數似乎都沒有在“ target”中添加“ className”。

謝謝

Answer 1

addEventListener需要回調函數，而不是函數調用結果（在您的情況下會發生）。 將您的函數包裝在另一個函數中以解決此問題：

dropDown.addEventListener("mouseenter", () => toggleClass(dropDownList, classToToggle));
dropDown.addEventListener("mouseleave", () => toggleClass(dropDownList, classToToggle));