re2.addEventListener("mouseover", function(){
const re21 = document.getElementById("reso");
re21.style.position = "absolute";
re21.style.top = "50%";
re21.style.left = "50%";
console.log("Exiting Listener- mouseOver");
re3.addEventListener("mouseover", function(){
const re22 = document.getElementById("reso");
re22.style.position = "fixed";
re22.style.top ="0px";
re22.style.left="0px";
console.log("Exiting Listener- mouseout");
});
});
J'ai un élément div html avec l'identifiant "reso". Ce que je veux faire, c'est déplacer l'élément du point A au point B chaque fois que la souris l'atteint. Comment peut-on le faire?
Lorsque nous exécutons le code javascript ci-dessus. Il ne bouge qu'une seule fois. Nous avons ensuite essayé d'encapsuler le code ci-dessus avec certains journaux de la console en utilisant une boucle de i=0 à 10. Tous les journaux sont en cours d'impression. Mais l’écouteur d’événements ne s’exécute qu’une seule fois.
Pouvez-vous nous aider à faire cela ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devrez peut-être initialiser un compteur dans une portée externe en dehors de la fonction de rappel d'événement, puis l'incrémenter à chaque fois que l'événement est déclenché.
const elm = document.getElementById("reso"); let initialTopPosition = 0; let initialLeftPosition = 0; function moveElement() { initialTopPosition++; initialLeftPosition++; elm.style.top = `${initialTopPosition}%`; elm.style.left = `${initialLeftPosition}%`; console.log("Exiting Listener- mouseOver"); }; elm.addEventListener("mousemove", moveElement);#reso { background-color: red; height: 100px; width: 100px; display: inline-block; position: absolute; }Vous pouvez utiliser l'événement mousemove au lieu de l'événement mouseover. Cela vous permettra de mettre à jour constamment la position de l'élément au fur et à mesure que la souris bouge
const re21 = document.getElementById("reso"); let isMoving = false; re21.addEventListener("mousemove", function(event) { if (!isMoving) { isMoving = true; re21.style.position = "absolute"; re21.style.top = `${event.clientY}px`; re21.style.left = `${event.clientX}px`; } }); re21.addEventListener("mouseout", function() { isMoving = false; });