I have 2 overlapping siblings like this:
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>whenever I mouseup on item2 I want item1 mouseup event to also be triggered if mouse is within item1
( Basically I want mouseup to be triggered on whatever divs the mouse is within regardless of which is overlapping what )
How do I achieve this?
Using elementsFromPoint as 'pointed out' by @Teemu in the comments I came up with this:
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>