修复JS点击外部关闭自定义选择列表时破坏Checkbox功能的问题

问题说明 #

使用checkbox和label实现了自定义选择列表，点击切换选项的功能正常，但无法通过点击选择列表及其子元素以外的区域关闭列表。尝试添加鼠标抬起事件监听器实现外部点击关闭时，破坏了checkbox原有功能，现在只能通过外部点击关闭列表，需要修复该问题。

解决方案 #

核心是优化外部点击的判断逻辑，排除整个选择列表容器（label元素）及其所有子元素，同时保留checkbox和label的原有交互逻辑，另外在选择选项后自动关闭列表提升体验：

• 获取选择列表的容器元素（.btn），判断点击目标是否在该容器内部
• 仅当点击区域在容器外部且不是checkbox本身时，才将checkbox的checked状态设为false
• 在选择选项的函数中，主动将checkbox设为未选中，实现选择后自动关闭列表

修改后的完整代码 #

HTML #

<input type="checkbox" id="checkbox">
<label class="btn" for="checkbox">
  <span id="selected">SELECT</span>
  <ul>
    <li onclick="selectList('Opt1')">Opt1</li>
    <li onclick="selectList('Opt2')">Opt2</li>
    <li onclick="selectList('Opt3')">Opt3</li>
  </ul>
</label>

CSS #

.btn {
  display: block;
  width: 100px;
  height: 50px;
  text-align: center;
  color: white;
  background: black;
  border-radius: 15px;
  line-height: 50px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.btn:active {
  background: grey;
}

.btn ul {
  display: none;
  list-style: none;
  color: black;
  flex-direction: column;
  margin: 0;
  padding: 2.5px 5px;
  left: 0;
  top: 50px;
  background: grey;
  border-radius: 15px;
  position: absolute;
}

.btn ul li {
  display: block;
  width: 90px;
  height: 35px;
  line-height: 35px;
  background: black;
  border-radius: 15px;
  color: white;
  margin: 2.5px 0;
}

.btn ul li:active {
  background: grey;
}

/* CHECKBOX CHECKED */
#checkbox:checked + .btn ul {
  display: flex;
}

JavaScript #

// 选择列表选项
function selectList(id) {
  let selected = document.getElementById('selected');
  selected.innerHTML = id;
  // 选择后自动关闭列表
  document.getElementById('checkbox').checked = false;
}

// 监听外部点击关闭列表
window.addEventListener('mouseup', function(event){
  const checkbox = document.getElementById('checkbox');
  const dropdownContainer = document.querySelector('.btn');
  // 判断点击目标是否在下拉容器内部，或者是checkbox本身
  if (!dropdownContainer.contains(event.target) && event.target !== checkbox) {
    checkbox.checked = false;
  }
});

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