事件監聽器和按鈕點擊沖突

Question

我有一個需要遵守以下行為的菜單：

• 按下外部按鈕打開
• 在其邊界之外單擊時關閉

問題是，要打開的按鈕也在菜單邊界之外，所以目前，按下按鈕正在打開編輯器菜單，然后點擊偵聽器立即再次關閉它。 我嘗試使用變量和元素數據，以便單擊偵聽器僅在菜單已打開時才激活，但事件偵聽器比按鈕單擊慢，因此菜單已經擴展（據偵聽器所知）它被激活的時間。 我知道我可以使用超時來解決這個問題，因此在點擊偵聽器激活之前數據不會更改為“expanded = true”，但這似乎有點笨拙，我想知道是否有更好的選擇。 這是一個演示問題的代碼片段。

以及隨之而來的js代碼：

document.addEventListener("click", (event) => {
  if (!document.getElementById("menu").contains(event.target) && document.getElementById("menu").dataset.open) {
    closeMenu();
  }
});

//Expand menu
function openMenu() {
  document.getElementById("menu").dataset.open = true;
  document.getElementById("menu").style.height = "80vh";
  console.log("open");
}
//Collapse menu
function closeMenu() {
  document.getElementById("menu").dataset.open = false;
  document.getElementById("menu").style.height = "0";
  console.log("close");
}

謝謝你的幫助！

Answer 1

您可以通過在 openMenu 中獲取事件參數並在其上調用stopPropogation方法來讓按鈕阻止其父元素注冊單擊。

function openMenu(e) {
  e.stopPropogation()
  document.getElementById("menu").dataset.open = true;
  document.getElementById("menu").style.height = "80vh";
  console.log("open");
}

單擊子錨點時，如何防止觸發父級的 onclick 事件？

Answer 2

感謝您的回答：這是我基於@Addison Schmidt 的回答的解決方案，它修復了幾個錯誤：

function openMenu(e) {
  if (!event) var e = window.event
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();

  document.getElementById("menu").dataset.open = true;
  document.getElementById("menu").style.height = "80vh";
  console.log("open");
}

來源： Event.stopPropagation 不工作