从 Javascript 函数中排除额外的 id

Question

是否可以在此代码中添加一个 ID，以便在单击所需容器本身（移动导航）加上一个附加 ID（汉堡菜单-div）时不会触发。我有一个按钮来触发导航（汉堡菜单 div）。它切换一个类。所以当我点击那个特定的按钮时，这段代码应该什么都不做......这可能还是我有一个思维错误？

//Actual code and working but how to insert an additional id to avoid triggering it also on that id

document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('mobile-navigation');
  if (!container.contains(e.target)) {
    container.style.display = 'none';
  }
});

//Changed to this code to select multiple ids but not working

document.addEventListener('mouseup', function(e) {
  var container = document.querySelectorAll('mobile-navigation, hamburger-menu-div');
  if (!container.contains(e.target)) {
    container.style.display = 'none';
  }
});

感谢您的支持！

编辑：添加更多代码以便更好地理解：

//Toggle nav menu to show and hide

document.getElementById("hamburger-menu-div").addEventListener("click", function() {
  var x = document.getElementById("mobile-navigation");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
});


//Hide it when clicked outside

var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
document.addEventListener('mouseup', function(e) {
  console.log(e.target);
  var set = 0;
  for (var i = 0; i < container.length; i++) {
    if (e.target == container[i]) {
      set = 1;
    }
  }
  if (set === 0) {
    container[1].style.display = 'none';
  }
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
}

<div id="hamburger-menu-div" class="hamburger-menu-div">
  BUTTON
</div>


<div id="mobile-navigation" class="mobile-navigation">
  <p>- Navigationpoint 1</p>
  <p>- Navigationpoint 2</p>
  <p>- Navigationpoint 3</p>
  <p>- Navigationpoint 4</p>
  <p>- Navigationpoint 5</p>
</div>

Answer 1

如果这不是您想要的，请告诉我。从您的代码看来，您想隐藏未点击的元素，对吗？

var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
document.addEventListener('mouseup', function(e) {
  //console.log(container);
  for (var i = 0; i < container.length; i++) {
    if (!(container[i].contains(e.target))) {
      container[i].style.display = 'none';
    }
  }
});

<div id = 'mobile-navigation'>
lorem
</div>
<div id = 'hamburger-menu-div'>
ipsem
</div>

又一次尝试：

var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
document.addEventListener('mouseup', function(e) {
  console.log(e.target);
  var set=0;
  for (var i = 0; i < container.length; i++) {
    if (e.target==container[i]) {
      set=1;
    }
  }
  if(set===0){
  container[0].style.display = 'none';
  }
});
//this does the same as the code below, but with two ids..
/*
document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('mobile-navigation');
  if (!container.contains(e.target)) {
    container.style.display = 'none';
  }
});
*/

<div id = 'mobile-navigation'>
mobile-navigation
</div>
<br>
<br>
<br>
<div id = 'hamburger-menu-div'>
hamburger-menu-div
</div>
<br>
<div>
click here to close menu
</div>

第三次尝试：既然您已经提供了 HTML（这样做总是更好），并且已经解释了您想要做什么，那么这个解决方案应该可以工作。如果没有，请告诉我具体哪里不好，我会修复它。

//Toggle nav menu to show and hide

document.getElementById("hamburger-menu-div").addEventListener("click", function() {
  var x = document.getElementById("mobile-navigation");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
});


//Hide it when clicked outside

var x = document.getElementById("mobile-navigation");
document.addEventListener('mouseup', function(e) {
  console.log(e.target);
  if (!(x.contains(e.target) || e.target == document.getElementById("hamburger-menu-div"))) {
    x.style.display = 'none';
  }
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
}

<div id="hamburger-menu-div" class="hamburger-menu-div">
  hamburger-menu-div
</div>


<div id="mobile-navigation" class="mobile-navigation">
  <h1> mobile nav </h1>
  <p>- Navigationpoint 1</p>
  <p>- Navigationpoint 2</p>
  <p>- Navigationpoint 3</p>
  <p>- Navigationpoint 4</p>
  <p>- Navigationpoint 5</p>
</div>