Javascript 如何为事件'；单击'；多个div的内部/外部？

我有一个

html

和

js

如下：

document.addEventListener（'click'，myFunction（））
函数myFunction（e）{
让inputs=document.querySelectorAll（“.my元素”）；
设m=inputs.forEach（（el）=>el.contains（e.target））；
如果（！m）{
console.log（'Element'）；
}
}

此处：

因为

inputs

是节点列表，所以需要将其转换为数组

我已经在这里使用扩展运算符

…

您还可以使用

数组执行此操作。从
，
[].concat（输入）

然后过滤数组中的
e.target
，并检查长度是否为0


document.addEventListener（'click'，myFunction）
函数myFunction（e）{
让inputs=document.querySelectorAll（“.my元素”）；
设m=[…输入].filter（el=>el==e.target）；
如果（！m.长度）{
console.log（'Element'）；
}
}
如果您只想在单击事件未超过某些元素时触发该事件，则必须检查事件目标是否与这些元素中的任何事件目标不同

除了将m的值设置为总是返回未定义的forEach，然后进行检查之外，几乎可以得到它！这永远是真的

只需从节点列表中创建一个新数组，并将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');
  }
}


从
文档中的
myFunction
中删除
（）
。addEventListener（'click'，myFunction（））
只需使用
文档即可。addEventListener（'click'，myFunction）

您可以将
target
用作
e.target.matches（“.my element”）
并验证它是否是您想要的<代码>匹配项
将采用
选择器
作为
参数

在下面的示例中尝试，当您单击
标签
或
输入
时，它不会记录任何内容。当您单击
div
的其他部分时，它将
log


document.addEventListener（'click'，myFunction）；
函数myFunction（e）{
//让inputs=document.querySelectorAll（“.my元素”）；
//让titles=document.queryselectoral（“.my title”）；
//设m=inputs.forEach（（el）=>el.contains（e.target））；
if（例如target.matches（'.my元素'））{
log（'Element'，e.target.innerText）；
}
}

abcd
C
您能详细解释一下吗？