如何在点击时显示主体，但使用Javascript排除特定元素及其子元素？

如何解决如何在点击时显示主体，但使用Javascript排除特定元素及其子元素？

使用javascript将点击事件侦听器附加到正文时，如何编写仅在e.target不是包含类active或其中任何一个的元素时才触发的条件元素孩子？ active中有一些子元素需要点击。类似于您在模式上的任何位置单击时，它保持打开状态，但在DOM上的其他任何位置，都将其删除？

document.body.addEventListener("click",e => {
    if (!e.target ...) {
       // trigger functions
    }
}

解决方法

实现此效果的一种方法是侦听点击，然后在DOM中从e.target一直循环到document.body。

当您向上循环时，请检查每个元素以查看其是否包含类.active。如果是这样，则可以使用break语句结束该函数。

这意味着您仍然可以单击.active的子级，并响应其他Event Listeners的其他功能。

工作示例：

const myFunction = (e) => {

  let containsActiveClass = false;
  let reviewNode = e.target;
  
  while (reviewNode.nodeName !== 'BODY') {
  
    if (reviewNode.classList.contains('active')) {
      containsActiveClass = true;
      break;
    }
    
    reviewNode = reviewNode.parentNode;
  }
  
  if (containsActiveClass === false) {
    window.alert('You clicked! (But not on .active or any of its child elements.)');
  }
}

document.body.addEventListener('click',myFunction,false);

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 180px;
  background-color: rgb(127,127,191);
  cursor: pointer;
}

.active {
  cursor: default;
}

.active,.inactive {
  position: relative;
  display: inline-block;
  flex: 0 0 120px;
  height: 120px;
  text-align: center;
  font-family: sans-serif;
  font-size: 14px;
  background-color: rgb(255,0);
}

.active div,.inactive div {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 60px;
  height: 60px;
  background-color: rgb(255,255,0);
}

<div class="container">
<div class="inactive">Inactive
<div>Inactive Child</div>
</div>

<div class="active">Active
<div>Active Child</div>
</div>

<div class="inactive">Inactive
<div>Inactive Child</div>
</div>
</div>

,

您可以将其与CSS选择器匹配

document.querySelectorAll('div').forEach(elem=>{
 console.log(elem.id,elem.matches('.active,.active *'))
})

<div id=d1>
  <div id=d2 class=active>
    <div id=d3></div>
  </div>
  <div id=d4>
    <div id=d5></div>
    <div id=d6 class=active></div>
  </div>
</div>