0

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> 

4
  • No logro entender bien cual es el comportamiento deseado, a que te refieres con que "se detenga" esto es solo para que no quede el evento escuchando o es algun comportamiento especifico en la bolita de adentro? Commented el 16 dic. 2021 a las 3:46
  • /* window.removeEventListener("mousemove", mover); */ cuando dejas correr esto, hay un error, no reconoce la función "mover"; por lo tanto la función no se detiene.
    – kraud
    Commented el 16 dic. 2021 a las 3:47
  • Lo que quiero decir es que la quiero remover la función "mover" para que no quede el evento escuchando
    – kraud
    Commented el 16 dic. 2021 a las 3:50
  • creo que podrías en vez de usar un forEach, usar un for comun y hacer el remove al link[i] por ejemplo, pero eso causaría quizás que al dejar de escuchar no vuela a funcionar cuando vuelvas al cuadrado, no se si esa es la idea.. Para que el circulo se mueva al entrar el mouse, el evento debe estar escuchando, lo que podrías hacer teniendolos con el indice es por medio de un if, cuando sale de uno hacer el remove de ese y el listen del otro.. Commented el 16 dic. 2021 a las 3:56

1 respuesta 1

1

Se me ocurren 2 soluciones. La primera es simplemente eliminar el evento usando window.onmousemove = null;. La desventaja de esto es que si tienes otro evento de tipo mousemove sobre window entonces también va a eliminarse.

La segunda solución creo que es mucho mejor, requiere unos cuantos más cambios pero me deja pensando en algunas inquietudes por la forma en la que estás haciendo las cosas ¿Por qué estás agregando el evento mousemove a la ventana y no simplemente al elemento sobre el que lo necesitas, es decir, el elemento con la clase .box? Siento que es mucho más sencillo algo como:

l1.parentNode.addEventListener("mousemove", mover);

De esta manera ni siquiera requieres removerlo. Los cálculos solo estarán cuando el mouse esté sobre el elemento. Cuando el mouse no esté sobre el elemento no se disparará el evento. De cualquier manera si quieres removerlo basta que en el segundo foreach hagas algo como:

 l2.parentNode.onmousemove = null;

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";
        };
        l1.parentNode.addEventListener("mousemove", mover);

    });
   });

    link.addEventListener("mouseleave",() => {
    
           let hijo = link.querySelectorAll('.hijo');
           hijo.forEach(l2 => {
            l2.classList.remove("edd1");
            l2.parentNode.onmousemove = null;
           });

    });
});
/* 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>

2
  • Puedes comprobar que los cálculos con la segunda solución no se disparan simplemente poniendo un console.log en mover. Verás que ni siquiera requieres remover el evento, así que puedes omitir esa parte. ¡Buena Suerte!
    – Jaime
    Commented el 16 dic. 2021 a las 5:02
  • !!!GRACIAS por la respuesta, además aclaraste varias cosas.
    – kraud
    Commented el 16 dic. 2021 a las 12:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.