Tengo 2 hermanos superpuestos así:
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> cada vez que paso el mouse sobre el elemento 2, quiero que el evento mouseup del elemento 1 también se active si el mouse está dentro del elemento 1
(Básicamente, quiero que mouseup se active en cualquier división en la que se encuentre el mouse, independientemente de cuál se superponga a qué)
¿Cómo logro esto?
Usando elementsFromPoint como 'señaló' @Teemu en los comentarios, se me ocurrió esto:
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>