Как я могу отменить клик из window.onclick в JavaScript

Question

Я пытаюсь создать меню бургера, и когда я щелкаю за пределами меню бургера, оно закрывается, как я хотел, но оно просто продолжает щелчок и идет куда угодно, чтобы выйти из меню бургера

window.onclick = function () {
        if ($scope.showMenuContent) {
            $scope.showMenuContent = false;
            $scope.$apply();
        }
};

Я тоже использую angular js, поэтому переменная showMenuContent показывает и скрывает мое меню бургера.

Я уже пытался остановить распространение, как это

window.onclick = function (event) {
        event.stopPropagation();
        if ($scope.showMenuContent) {
            $scope.showMenuContent = false;
            $scope.$apply();
        }
};

но это не работает!

Answer 1

Решение

Не рекомендуется добавлять и удалять прослушиватели событий очень часто.Скорее всего, вы можете добавить постоянный прослушиватель событий в окно и проверить, был ли щелчок в меню, используя event.toElement.id , а затем предпринять соответствующие действия.

Вот исходный код:

let burger = document.getElementById('burger'),
  isOpen = false;


const closeMenu = e => {
  let _target = e.toElement.id;
  if(_target != 'burger' && isOpen) {
  //This will close if burger is open and you click elsewhere
    burger.classList.remove('open');
    isOpen = false;
  }
}

const toggleMenu = () => {
  if (!isOpen) {
  //opens the menu
    burger.classList.add('open');
    isOpen = true;
  } else {
  //closes the menu
    burger.classList.remove('open');
    isOpen = false;
  }
}

window.addEventListener('click', closeMenu, false);

#burger {
  width: 50px;
  height: 50px;
  background: red;
  cursor: pointer;
}

.open {
  width: 300px !important;
  height: 300px !important;
  background: black !important;
}

<div id="burger" onclick="toggleMenu()"></div>

Answer 2

Я сделал это, удалив EventListener при закрытии меню и добавив при открытии