0
197
Vistasobtener la posición del puntero del mouse en un cuadro que tiene elementos secundarios
quiero obtener la posición del puntero del mouse que el cuadro a
por ejemplo :
Necesito este espacio, pero si el mouse ingresa al cuadro rojo o amarillo, obtengo otro número.
sé que tenemos e.offsetY pero esto da la posición que e.target, así que si la caja tiene un hijo, esto no funciona
También sé que tenemos e.layerY, pero esto da la posición relativa, por lo que si el elemento secundario tiene un estilo de posición relativa o se transforma, no funciona.
por ejemplo :
const parent = document.querySelector(".parent"); const result = document.querySelector(".result"); parent.addEventListener("mousemove",(e)=>{ result.innerText = `offsetY: ${e.offsetY} , layerY: ${e.layerY}`}) .parent{ width:200px; height:200px; background-color:blue; padding:30px; position:rlative } .result{ background-color:#999; color:black; padding:10px; margin:20px; } .child-red{ background-color:red; width:30px; height:30px; } .child-yellow{ background-color:yellow; width:30px; height:30px; margin-top:30px; position:relative <div class="parent"> <div class="child-red"> </div> <div class="child-yellow"> </div> </div> <p class="result">offsetY: 0 , layerY: 0</p>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
offsetY , como dice en el nombre, le da el desplazamiento del cursor dentro de un elemento. Si desea que el cursor se coordine en valores px con respecto al document.body , necesita event.cursorY
·
Juan Pablo Isaza
Denunciar
Responde la pregunta