函数参数不适用于 .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>该函数只是没有将“className”添加到“target”，即使当我 console.log 时，“className”和“target”参数似乎都通过了。

Answer 1

addEventListener期望回调函数，而不是函数调用结果（在您的情况下会发生）。将您的函数包装在另一个函数中以解决问题：

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