javascript - 如何在点击时进行正文但使用 Javascript 排除特定元素及其子元素？

Question

使用 javascript 将单击事件监听器附加到正文时，如何编写仅在 e.target 时才触发的条件？不是包含类 active 的元素或任何这些元素的 child ？ active内有子元素需要可点击。类似于当您单击模态上的任何地方时，它会保持打开状态，但 DOM 上的任何其他地方都会被删除？

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

Answer 1

实现此效果的一种方法是监听单击，然后从 e.target 向上循环遍历 DOM。一路到document.body .
当您向上循环时，检查每个元素以查看它是否包含类 .active .如果是，你可以用 break 结束函数。陈述。
这意味着您仍然可以拥有 .active 的 child 仍然可以点击并将响应其他 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, 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>