Explicare que hace mi código: tengo dos contenedores(verde) que tienen su hijo(rojo) => Cuando el mouse entra y se desplaza dentro de uno de esos contenedores, su hijo(rojo) se mueve junto al mouse.
Lo que busco:
*Quiero que cuando el mouse salga de ese contenedor(verde), la función que calcula la posición del hijo(rojo) se detenga(Ósea que no se quede el evento escuchando ).
- No busco ningun comportamiento en la bolita roja.
NOTA 1: los cálculos funcionan bien; el problema esta en ¿ donde poner window.removeEventListener("mousemove", mover);? ¿esta bien que baya window.?
NOTA 2: Creo que el problema exacto es; cuando se remueve la función "mover" este no es reconocido, ya que esta declarado dentro de un forEach.
NOTA 3: Cuando te fijas en el inspector de código, se nota en el estilo en linea del elemento "hijo", que los cálculos de su posición continúan aun cuando sales del contenedor verde, ya que no se pudo remover la función mover.
"Deje el Error comentado para que puedan ejecutar el código y ver los que sucede"
!!GRACIAS...
let etiqueta = document.querySelectorAll('.etiqueta');
etiqueta.forEach(link => {
link.addEventListener("mouseover",() => { // mouseover cuando el mause entra al elemento etiqueta
const t = link.getBoundingClientRect(); // calcula la posición
let hijo = link.querySelectorAll('.hijo');
hijo.forEach(l1 => {
l1.classList.add("edd1"); // solo quita un class
function mover(e){
let left = e.pageX;
let top = e.pageY;
l1.style.left = left - t.left + "px";
l1.style.top = top - t.top + "px";
};
window.addEventListener("mousemove", mover);
});
});
link.addEventListener("mouseleave",() => {
let hijo = link.querySelectorAll('.hijo');
hijo.forEach(l2 => {
l2.classList.remove("edd1");
});
/*
window.removeEventListener("mousemove", mover);
*/
});
});
/* Simples estilos para delimitar los div*/
body{
display: flex;
}
.box{
width: 300px;
height: 200px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transition: all 0.2s ease;
transform: scale(0);
}
.edd1{
background-color: red;
transform: scale(1);
};
<div class="box">
<div class="etiqueta">
<div class="hijo"></div>
</div>
</div>
<div class="box">
<div class="etiqueta">
<div class="hijo"></div>
</div>
</div>