javascript - 如何为多个 div 的内部/外部事件 'click' 设置条件？

Question

我有一个 html 和 js 如下:

document.addEventListener('click', myFunction())

function myFunction(e) {
  let inputs = document.querySelectorAll('.my-element');
  let m = inputs.forEach((el) => el.contains(e.target));
  if (!m) {
    console.log('Element');
  }
}

<div class="my-element" style: "width:100px; height: 100px">
</div>
<div class="my-element" style: "width:100px; height: 100px">
</div>
<div class="my-element" style: "width:100px; height: 100px">
</div>

问题是，即使我在目标内部单击，该条件仍然有效。我需要只有当我单击元素外部时该条件才有效。我的错误是什么？

Answer 1

如果您希望单击事件仅在不在某些元素上时触发，则必须检查事件目标是否与这些元素中的任何目标不同

你几乎已经拥有了它，除了你将 m 的值设置为始终返回未定义的 forEach ，然后检查 !m 它将始终为 true

只需从节点列表中创建一个新数组并将 m 设置为 .find 值，就这样了

document.addEventListener('click', myFunction)

function myFunction(e) {
  let inputs = document.querySelectorAll('.my-element');
  let titles = document.querySelectorAll('.my-title');
  let m = Array.apply(0,inputs).find((el) => el.contains(e.target));
  if (!m) {
    console.log('Element');
  }
}