javascript - 防止父容器内的内部内容使父容器消失

Question

我有这个脚本，它使用切换按钮来显示或隐藏目标父容器。父类容器隐藏的正确方式有两种

第二次按下切换按钮或单击父类容器外部。所以它工作得很好但是任何时候我在里面添加任何东西

父类容器，我点击那些里面的内容，它使整个父类容器消失，我该如何防止呢？

这是我的代码

  document.addEventListener('DOMContentLoaded', function(){

document.addEventListener('click',closeContainer);

function closeContainer(obj){
     var containerVar = document.querySelector('.container');
    if(obj.target.className != 'container') {
        if (containerVar.style.display === 'flex') {
            containerVar.style.display = 'none';
        } else  if(obj.target.id == 'toggle') {
            containerVar.style.display = 'flex';
        }
    }
  }
  
});

.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;
}

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

Answer 1

您需要捕获容器上的点击事件并停止传播，这样就无需检查文档事件处理程序中的目标:

document.addEventListener('DOMContentLoaded', function() {

  // if click event is inside container, then stop propagation
  const container = document.querySelector('.container');
  container.addEventListener('click', function(e) {
    e.stopPropagation();
  });

  document.addEventListener('click', closeContainer);

  function closeContainer(obj) {
    var containerVar = document.querySelector('.container');
    if (containerVar.style.display === 'flex') {
      containerVar.style.display = 'none';
    } else if (obj.target.id == 'toggle') {
      containerVar.style.display = 'flex';
    }
  }

});

.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;
}

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

另一种解决方案是在 document 上只有一个事件处理程序，并检查目标或其任何祖先是否具有 container 类(类似于 jquery 的 closest 方法):

document.addEventListener('DOMContentLoaded', function() {

  document.addEventListener('click', closeContainer);

  function closeContainer(obj) {
    if (closest(obj.target, '.container')) return;

    var containerVar = document.querySelector('.container');
    if (containerVar.style.display === 'flex') {
      containerVar.style.display = 'none';
    } else if (obj.target.id == 'toggle') {
      containerVar.style.display = 'flex';
    }
  }

  function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

    while (el) {
      if (matchesSelector.call(el, selector)) {
        return el;
      } else {
        el = el.parentElement;
      }
    }
    return null;
  }

});

.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;
}

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