如何避免点击父容器内元素时触发父容器隐藏？

嘿，这个问题我之前也踩过坑！核心原因是你当前的判断逻辑只检查了点击目标是不是.container本身，但当你点击容器内部的子元素时（比如你的.inner-container），obj.target指向的是子元素，这时候obj.target.className != 'container'条件成立，就误触发了关闭容器的逻辑。

下面是修改后的代码，完美解决这个问题：

修改后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function(){
  document.addEventListener('click', closeContainer);
  
  function closeContainer(obj){
    const containerVar = document.querySelector('.container');
    // 判断点击的元素是否在.container内部（包括容器本身）
    const isClickInsideContainer = containerVar.contains(obj.target);

    // 点击toggle按钮时，切换容器显示状态
    if(obj.target.id === 'toggle') {
      containerVar.style.display = containerVar.style.display === 'flex' ? 'none' : 'flex';
    } 
    // 点击容器外部且容器处于显示状态时，关闭容器
    else if(!isClickInsideContainer && containerVar.style.display === 'flex') {
      containerVar.style.display = 'none';
    }
  }
});

代码说明 #

• 用containerVar.contains(obj.target)检测点击的元素是否属于.container本身或它的后代元素，如果是，就跳过关闭逻辑
• 优先处理toggle按钮的点击事件，确保点击按钮时能正常切换容器的显示状态
• 仅当点击容器外部，且容器当前处于显示状态时，才执行关闭操作

你的HTML和CSS代码无需修改，直接沿用即可：

原HTML代码 #

<button id='toggle'>Toggle</button>
<div class='container'>
  <div class='inner-container'></div>
</div>

原CSS代码 #

.container{
  background-color: orange;
  height: 350px;
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  display: none;
  justify-content: center;
}
.inner-container{
  margin-top: 50px;
  background-color: red;
  height: 200px;
  width: 200px;
  display: inline-block;
}

这样修改后，点击容器内部的任何内容都不会触发关闭，只有点击toggle按钮或者容器外部区域时，才会切换/关闭容器啦！

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