FA1 F.W's questions

今天是个好日子！这个问题虽然无限愚蠢，但仍然如此。我正在编写一个模态窗口，想要实现以下功能：在模态窗口外部单击=关闭模态窗口。在模态窗口处于活动状态时创建一个使整个文档变暗的背景的想法是不合适的（尽管现在我将其保留为 event.target，我有一个包含“modalWrap”类的元素）。但是有一个catch - 可能是也可能不是 另外，我不想向每个子节点添加某种类 - 如果有 1000 个节点，那么我必须手动向每个元素添加这样的类。

标记如下所示：

<div class="modalWrap">
  <div attr="modal">
    <button>
      <span></span><span></span>
    </button>
    <div class="modal__header">
      <h2 class="modal__title">h2 modalOne title text</h2>
    </div>
    <div class="modal__content someRandomClass">
      <h3>custom title of modalOne</h3>
    </div>
    <div>hello from modalOne's footer</div>
  </div>
</div>

以下是我在 JS 方面所做的尝试：

modalWrap.addEventListener('click', function(event) {
const window = modal.querySelector([attr="modal"]) //возвращает колекцию
   if (event.target == !modal || event.target == ! window.children) {  //понятно что здесь я буквально сравниваю один клик аж с 4ю разными DOM элементами, т.е. чтобы условие было правдиво - надо чтобы клик произошел аж на 4х элементах что конечно бред
   closeModal();
   }
}  

问题是，是否可以以某种方式检查 event.target = 具有 attr="modal" 属性的任何（一个）子 div 元素。我已经尝试过一个循环来做到这一点——但它仍然有点糟糕。也就是说，简单地说：单击 div attr="modal" 外部而不是其子级应该会导致关闭此窗口（调用 close 函数）