I have 2 overlapping siblings as shown below:
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 click on item2, I want the mouseup event of item1 to also be triggered if the mouse is within item1.
In essence, I want the mouseup event to be activated on whichever div the mouse is inside, regardless of overlapping positions. How can I achieve this functionality?