javascript - .addEventListener 抛出 TypeError

Question

这个问题已经有答案了:

How to pass arguments to addEventListener listener function? (36 个回答)

已关闭 3 年前。

我正在设置一个函数，当在外部单击时将关闭下拉菜单。该函数按预期工作，但抛出错误。

考虑到该函数按预期工作，我不确定导致错误的原因。

const userBtn = document.querySelector(".header-userbtn");
const userMenu = document.querySelector(".header-usermenu");

function hideOnClickOutside(element, button) {
  if (!element.classList.contains("active")) {
    return false;
  }
  const outsideClickListener = event => {
    if (!element.contains(event.target)) {
      button.click();
      removeClickListener();
    }
  };

  const removeClickListener = () => {
    document.removeEventListener("click", outsideClickListener);
  };

  document.addEventListener("click", outsideClickListener);
}

userBtn.addEventListener("click", function(e) {
  const chevron = this.querySelector(".chevron-wht");

  this.classList.toggle("active");
  chevron.classList.toggle("active");
  userMenu.classList.toggle("active");

  e.stopPropagation();
  document.addEventListener(             /*main.js:31 */
    "click",
    hideOnClickOutside(userMenu, userBtn));
});

这是错误消息。每次菜单关闭时都会触发，并且从单击事件中调用该函数。

main.js:31 Uncaught TypeError: Failed to execute 'addEventListener' on 'EventTarget': The callback provided as parameter 2 is not an object.
    at HTMLButtonElement.<anonymous> (main.js:31)

Answer 1

您当前没有向指定的事件监听器提供回调函数...

document.addEventListener(
    "click",
    function() { hideOnClickOutside(userMenu, userBtn); }
 );