Khan Academy环境下下拉框点击内部仍关闭的问题解决方法

问题原因 #

你的代码存在两个核心问题：

1. 子元素点击误判：下拉框内部的#account、#inside-account是#acc-drpdwn的子元素，点击这些区域时event.target指向子元素而非下拉框本身，导致隐藏逻辑被触发。
2. 事件冒泡冲突：点击account-signin按钮时，事件会冒泡到document，触发隐藏逻辑，可能出现下拉框刚打开就被关闭的闪显问题。

解决方法 #

核心修改点 #

• 使用element.contains(event.target)判断点击区域是否属于下拉框或触发按钮的范围，覆盖子元素的点击场景。
• 给触发按钮的点击事件添加stopPropagation()，阻止事件冒泡到document。

修改后的完整代码 #

HTML

<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>

CSS

#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;
  border: none;
  padding: 0;
  background: transparent;
}

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

JavaScript

// 获取元素
const dropdown = document.getElementById("acc-drpdwn");
const accountImage = document.getElementById("account-signin");

// 打开下拉框函数
function openAccdrpdwn(event) {
  event.stopPropagation(); // 阻止事件冒泡
  dropdown.style.display = "block";
}

// 绑定打开事件
accountImage.addEventListener('click', openAccdrpdwn);

// 点击外部隐藏下拉框
document.addEventListener('click', function(event) {
  // 判断点击区域是否不在下拉框、触发按钮及其子元素范围内
  if (!dropdown.contains(event.target) && !accountImage.contains(event.target)) {
    dropdown.style.display = "none";
  }
});

代码说明 #

1. contains()方法：可以判断一个元素是否包含另一个元素，无论层级深浅，能准确识别点击区域是否属于下拉框或触发按钮。
2. stopPropagation()：阻止按钮点击事件向上冒泡，避免触发document的点击监听逻辑。
3. 按钮样式优化：移除默认按钮的边框和内边距，确保点击图片区域时也能正确触发按钮事件。

内容的提问来源于stack exchange，提问作者iii