Кнопка Пауза не открывает меню; проблема события - PullRequest
Новая
       1

Кнопка Пауза не открывает меню; проблема события

0 голосов
/ 07 апреля 2020

Я внедряю чрезвычайно простую кнопку паузы и меню в мою игру 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 выполняется перед слушателем события выполняется. Я полагаю, что если поменять этот порядок, моя проблема будет решена, но я не знаю, как это сделать. Есть ли простое решение?

Спасибо за потраченное время.

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Используя подход Брендана C., Я решил проблему.

Я избавился от onclick в html и вместо этого обновил функцию 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 будет вызываться только один раз, несмотря ни на что. Еще раз спасибо за совет, Брендан.

1 голос
/ 07 апреля 2020

Вы можете избавиться от 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)
  }
})
...