如何取消window.onclick中的javascript单击

Question

I'm trying to create a burguer menu and when I click outside the burguer menu it closes like I wanted, but it just continues the click and goes wherever I clicked to leave the burguer menu

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

I'm using angular js too, so the variable showMenuContent shows and hides my burguer menu.

I have already tried to stop propagation like this

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

but it does not work!

Answer 1

我通过在关闭菜单时删除eventlistener并在打开时添加来实现了

Answer 2

Solution

Its not a good practice to add and remove event listeners very often. What you can rather do is add a permanent event listener to the window and check whether the click was on the menu or not by using event.toElement.id and then take actions accordingly.

Here is the source Code:

 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>