解决方案

Question

我正在尝试创建一个汉堡菜单，当我在汉堡菜单外部单击时，它会按我的意愿关闭，但它会继续单击并移动到我单击的位置即可离开汉堡菜单

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

我也在使用angular js，因此变量showMenuContent显示和隐藏我的burguer菜单。

我已经试图阻止这种传播

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

但是它不起作用！

Answer 1

我是通过在关闭菜单时删除eventlistener并在打开时添加

来实现的

Answer 2

解决方案

经常添加和删除事件侦听器不是一个好习惯。您可以做的是向窗口添加一个永久事件侦听器，并使用 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>

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

2 个答案:

解决方案

这是源代码：