使用 JavaScript e.target 在元素外部單擊不起作用

Question

我正在構建一個超級菜單，每個菜單上都有一個關閉按鈕，效果很好。 但是，我需要編寫一些 JavaScript 來說明，“如果您在大型菜單打開時單擊外部菜單，請將其關閉”。

我在下面寫了一個腳本。 它會檢測用戶何時在超級菜單內部單擊，但在用戶單擊外部時則不會。 在這種情況下，刪除使元素具有display: block;的display-on類display: block; .

const dropDownMenu = document.getElementsByClassName("drop-down");

for (let i = 0; i < dropDownMenu.length; i++) {
  dropDownMenu[i].addEventListener("click", (e) => {
    // If clicking in any area that has drop-down class, do nothing.
    if (dropDownMenu[i].contains(e.target)) {
      console.log("clicked in mega menu area");
      // If clicking in any area outside drop-down class, remove display-on class which closes the menu.
    } else {
      console.log("clicked outside mega menu area");
      document.querySelector(".display-on").classList.remove("display-on");
    }
  });
}

如果需要，可以在此處查看工作演示。

謝謝。

Answer 1

從上面的評論...

“當然，OP 還需要在任何drop-down分類元素之外注冊“退出下拉”事件的處理document.body可能是監聽的正確元素。”

……像這樣……

function handleDropDownMenuBehavior(evt) {
  if (evt.target.closest('.drop-down') === null) {

    document.querySelector(".display-on").classList.remove("display-on");

    console.log("clicked outside mega menu area");
  } else {
    console.log("clicked in or at mega menu area");
  }
}
document.body.addEventListener('click', handleDropDownMenuBehavior);

Answer 2

您可以向文檔添加一個全局事件偵聽器，以檢查單擊的內容是否不是超級菜單。 如果您需要任何額外的幫助，請告訴我:)

document.onclick = (e) => {
    if (e.target.contains(document.getElementsByClassName("drop-down")[0])) {
        console.log('close mega menu');
        document.getElementsByClassName("drop-down")[0].classList.remove("display-on");
    }
}