JavaScript实现点击页面非目标区域隐藏指定span元素的问题求助

原代码问题梳理 #

• 重复绑定事件：每次点击#confirm都会给body新增一个click监听器，多次点击后会触发多次相同逻辑，造成内存泄漏和逻辑错误
• 点击区域判断逻辑错误：e.target == yesItems.querySelectorAll("*")是拿单个点击元素和元素集合对比，永远返回false，会导致刚打开的yesItems立刻被隐藏
• 没有阻止事件冒泡：点击#confirm的事件会冒泡到body，触发body的click监听，直接把刚显示的yesItems关掉
• HTML规范问题：所有checkbox的id和for属性都重复为Diabetic，点击label时会触发错乱
• CSS选择器错误：items选择器缺少类前缀.，对应的<p class="items">样式不会生效

修正后的完整代码 #

HTML代码 #

<p class="items">
   <span class="label">example</span>
   <span class="label-items">
     <label class="label-item" for="health-problem" id="confirm">
        <input type="radio" id="health-problem" name="problem">
        Yes
     </label>
     <label class="label-item" for="no-problem">
        <input type="radio" id="no-problem" name="problem">
        No
      </label>
   </span>
   <span class="yes-items" id="yes-items">
     <span>                                            
       <label for="Diabetic1">
         <input type="checkbox" name="Diabetic" id="Diabetic1">
         a
       </label>
     </span>
     <span>                                            
       <label for="Diabetic2">
         <input type="checkbox" name="Diabetic" id="Diabetic2">
         b
       </label>
     </span>
     <span>                                            
       <label for="Diabetic3">
         <input type="checkbox" name="Diabetic" id="Diabetic3">
         c
       </label>
     </span>
     <span>                                            
       <label for="Diabetic4">
         <input type="checkbox" name="Diabetic" id="Diabetic4">
         d
       </label>
     </span>
     <span>                                            
       <label for="Diabetic5">
         <input type="checkbox" name="Diabetic" id="Diabetic5">
         e
         <textarea class="explain" placeholder="Define Other" cols="50" rows="3"></textarea> 
       </label>
     </span>
</span>                                    
</p>

CSS代码 #

/* 补全类选择器前缀 */
.items {
  border: 1px solid red;
  padding: .5rem;
  border-radius: 10px;
  position: relative; /* 给yes-items的绝对定位提供父级参照物，避免偏移 */
}

span.yes-items {
  position: absolute;
  border: 2px solid var(--c1, #333); /* 给自定义属性加默认值，避免没有定义时样式失效 */
  color: var(--txt, #000);
  background-color: #e6eef7;
  top: 100%; /* 调整位置到选项下方，更符合交互逻辑，可按需修改 */
  left: 0;
  width: 94%;
  padding: 1rem;
  border-radius: 10px;
  display: none;
  z-index: 99; /* 提高层级避免被其他元素遮挡 */
}

span.yes-items input {
  width: auto;
}

span.yes-items.open{
    display: block;
}

JS代码 #

const confirm = document.getElementById('confirm');
const healthProblem = document.querySelector('#health-problem');
const yesItems = document.getElementById('yes-items');
const noProblem = document.querySelector('#no-problem');

// 点击Yes单选框逻辑
confirm.addEventListener('click', function(e) {
  // 阻止事件冒泡到body，避免刚打开就触发关闭逻辑
  e.stopPropagation();
  if(healthProblem.checked) {
    yesItems.classList.add('open');
  }
});

// 点击No单选框直接隐藏yesItems
noProblem.addEventListener('click', function() {
  yesItems.classList.remove('open');
});

// 全局点击监听只绑定一次
document.body.addEventListener('click', function(e) {
  // 判断点击目标是否是yesItems本身或者其子元素
  const isClickInside = yesItems.contains(e.target);
  // 如果点击区域不在yesItems内部，就隐藏
  if(!isClickInside) {
    yesItems.classList.remove('open');
  }
});

// 阻止yesItems内部的点击事件冒泡到body，避免点内部元素也触发关闭
yesItems.addEventListener('click', function(e) {
  e.stopPropagation();
});

优化建议 #

• 若后续需要调整yesItems的触发逻辑，直接修改对应事件监听即可，不要嵌套绑定事件
• 如果页面有其他弹窗类组件，可统一用这种事件冒泡+contains判断的方式处理点击外部关闭逻辑
• 自定义CSS变量--c1和--txt建议在根选择器提前定义，避免样式异常

内容的提问来源于stack exchange，提问作者h.m.p.frontendDeveloper