Quisiera preguntarte sobre ayuda. Trato de hacer un cuadrado que siga a mi mouse cuando lo muevo, pero algo está mal con mi función y todo el tiempo después de mover el mouse, el cuadrado vuelve a su posición predeterminada.
let square = document.querySelector('.square') let container = document.querySelector('.container') container.addEventListener('mousemove', movingSquare); function movingSquare(e) { square.style.transform = "translate" + "(" + e.offsetX + "px" + "," + e.offsetY + "px" + ")"; } .container { background-color: red; height: 200px; width: 400px; } .square { background-color: blue; height: 50px; width: 50px; } <div class="container"> <div class="square"> </div> </div>El error de retraso no ocurre cuando se mueve hacia arriba o hacia la izquierda, pero ocurre cuando se mueve hacia abajo o hacia la derecha, esto ocurre cuando se mueve hacia abajo o hacia la derecha, el evento mousemove de los contenedores, no se activa en su lugar, el cuadrado recibe el evento, como cuando te mueves hacia la derecha/abajo, el mouse cae sobre el cursor
let square = document.querySelector('.square') let container = document.querySelector('.container') container.addEventListener('mousemove', movingSquare); function movingSquare(e) { square.style.transform = "translate" + "(" + e.offsetX + "px" + "," + e.offsetY + "px" + ")"; } .container { background-color: red; height: 200px; width: 400px; } .square { background-color: blue; height: 50px; width: 50px; } <div class="container"> <div class="square"> </div> </div> El cuadrado recibe el evento porque tiene pointer-events auto(true).
Puede deshabilitar esto en css usando pointer-events:none;
Vea el fragmento a continuación
let square = document.querySelector('.square') let container = document.querySelector('.container') container.addEventListener('mousemove', movingSquare); function movingSquare(e) { square.style.transform = "translate" + "(" + e.offsetX + "px" + "," + e.offsetY + "px" + ")"; } .container { background-color: red; height: 200px; width: 400px; } .square { background-color: blue; height: 50px; width: 50px; pointer-events: none;/*ADDED THIS LINE*/ } <div class="container"> <div class="square"> </div> </div>