暂停按钮无法打开菜单；事件问题

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)
  }
})

Answer 2

使用Brendan C.的方法，我解决了问题。

我摆脱了html中的onclick，而是更新了mouseClick函数，使其看起来像这样：

function mouseClick(e) {
    if (menu.pause.contains(e.target)) {
        menu.display(true);
    } else if (!menu.menu.contains(e.target)) {
        menu.display(false);
    }
}

这是可行的，因为menu.display无论如何都只会被调用一次。再次感谢您的提示，布伦丹。