Comment utiliser correctement addEventListener ?

Question

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 ?

Answer 1

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;
}

Answer 2

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