javascript - 暂停按钮不打开菜单；事件问题

Question

我正在我的 JavaScript 游戏中实现一个极其简单的暂停按钮和菜单。当您单击暂停按钮时，菜单应该出现，当您单击该菜单之外时，它应该再次消失。不幸的是，暂停按钮位于菜单的限制之外，因此当我单击暂停按钮时，菜单“出现”，但由于首先导致其打开的相同单击事件而立即消失，因为鼠标是在菜单之外。

我确信我可以使用超短setTimeout或一些额外的变量来解决这个问题，但我觉得有一个更简单的解决方案，但我一直缺少。这是我的代码:

HTML:

<div id="PauseButton" onclick="menu.display(true);"></div>
<div id="Menu"><p>Some text.</p></div>

JavaScript:

document.addEventListener("click", function(event) {
    mouseClick(event);
});

var menu = {
    menu: document.getElementById("Menu"),
    pause: document.getElementById("PauseButton"),
    display: function (open) {
        if (open) { // open menu
            this.pause.style.display = "none";
            this.menu.style.display = "block";
        } else { // close menu
            this.pause.style.display = "block";
            this.menu.style.display = "none";
        }
    }
}

function mouseClick(e) {
    if (menu.menu.style.display = "block") {
        if (!menu.menu.contains(e.target)) menu.display(false);
    }
}

因此，onclick 事件似乎在事件监听器执行之前执行。我想通过交换这个顺序我的问题就会得到解决，但我不知道该怎么做。有没有简单的解决办法？

感谢您的宝贵时间。

Answer 1

您可以摆脱 onclick 并在直接附加到暂停按钮的事件监听器中执行所有操作，例如:

var menu = {
  menu: document.getElementById("Menu"),
  pause: document.getElementById("PauseButton"),
  display: function (open) {
    if (open) {
      // open menu
      this.pause.style.display = "none";
      this.menu.style.display = "block";
    } else {
      // close menu
      this.pause.style.display = "block";
      this.menu.style.display = "none";
    }
  }
}

menu.pause.addEventListener("click", function (event) {
  if (menu.menu.style.display === "block") {
    menu.display(false)
  } else {
    menu.display(true)
  }
})