函数参数不适用于.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));