如何让div在点击其外侧时消失？

Question

如何使用 JavaScript/CSS/HTML 在可汗学院环境中实现一项功能，如果用户在下拉框外部单击，下拉框就会消失，但如果在内部单击，下拉框仍然可见？尽管进行了尝试，当前的实现还是会关闭下拉菜单，即使在内部单击也是如此。提供的代码使用附加到文档单击事件的事件侦听器来隐藏下拉列表（如果单击的元素不是下拉列表本身或帐户图像）。可能是什么原因导致此问题，以及如何解决该问题以在可汗学院环境的限制内实现所需的功能？这是我尝试过的代码：

// Function to open the account dropdown
function openAccdrpdwn() {
  document.getElementById("acc-drpdwn").style.display = "block";
} // Event listener to open the account dropdown when clicking on the account image
document.getElementById('account-signin').addEventListener('click', openAccdrpdwn);
// Function to open the account dropdown





// Event listener to close the account dropdown when clicking outside of it
document.onclick = function(event) {
  var dropdown = document.getElementById("acc-drpdwn");
  var accountImage = document.getElementById("account-signin");

  if (event.target !== dropdown && event.target !== accountImage) {
    dropdown.style.display = "none";
  }
};

#account {
  background-color: rgb(247, 247, 247);
  width: 175px;
  height: 300px;
  border-radius: 17px;
  position: absolute;
  top: 68px;
  left: 408px;
  box-shadow: 0px 0px 7px 3px lightgray;
  z-index: 1;
}

#inside-account {
  background-color: rgb(209, 255, 215);
  width: 175px;
  height: 80px;
  border-top-right-radius: 17px;
  border-top-left-radius: 17px;
  position: absolute;
  top: 68px;
  left: 408px;
  z-index: 2;
}

#acc-drpdwn {
  display: none;
}

.account-image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: 0px;
  top: 1.8px;
  cursor: pointer;
}

#account-image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
  position: absolute;
  left: -2px;
  top: -2.2px;
  float: left;
}

```

<button class="account-image" id="account-signin">
        <img id="account-image" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png" alt="Sample User Icon">
        </button>
<div id="acc-drpdwn">
  <div id="account"></div>
  <div id="inside-account"></div>
</div>

但是，这段代码似乎没有按预期工作。即使在其中单击，该框仍然会消失。您能否提供有关如何在可汗学院环境的限制下正确实现此功能的指导？

Answer 1

因为

dropdown

有子元素，所以

event.target

不一定是它本身，而是它的子元素。您可以做的是测试

event.target

是否是

dropdown

的后代：

if (!dropdown.contains(event.target) && event.target !== accountImage) {
  dropdown.style.display = "none";
}