javascript - 检测 2 个重叠同级元素上的事件？

Question

我有两个重叠的 sibling ，如下所示:

document.querySelector("#item1").addEventListener('mouseup',()=>{
    console.log("Mouseup item 1!");
});

document.querySelector("#item2").addEventListener('mouseup',()=>{
console.log("Mouseup item 2!")
},true);

#item1{
  height:10rem;
  width:10rem;
  background-color:red;
  position:absolute;
  z-index:-2;
  
}

#item2{
  height:10rem;
  width:10rem;
  background-color:green;
  position:relative;
  top:2rem;
}

<div id="item1"></div>
<div id="item2"></div>

每当我在 item2 上 mouseup 时，如果鼠标位于 item1 内，我希望 item1 mouseup 事件也被触发

(基本上我希望在鼠标所在的任何div上触发mouseup，无论哪个div与什么重叠)

如何实现这一目标？

Answer 1

使用elementsFromPoint作为@Teemu在我想出的评论中“指出”的内容:

document.querySelector("#wrapper").addEventListener('mouseup', (event) => {
  let els = document.elementsFromPoint(event.clientX, event.clientY);
  els.forEach(el => {
    if (el.id != '' && el.id != 'wrapper')
      console.log(el.id)
  })
});

#item1 {
  height: 10rem;
  width: 10rem;
  background-color: red;
  position: absolute;
}

#item2 {
  height: 10rem;
  width: 10rem;
  background-color: green;
  position: relative;
  top: 2rem;
}

#wrapper {
  background-color: blue;
  height: 20rem;
  width: 20rem;
}

<div id="wrapper">
  <div id="item1"></div>
  <div id="item2"></div>
</div>