Bagaimana untuk menggunakan addEventListener dengan betul?

Question

rreeee

Saya mempunyai elemen div html dengan id "reso". Apa yang saya mahu lakukan ialah memindahkan elemen dari titik A ke titik B apabila tetikus mencapainya. Bagaimana kita boleh melakukan ini?

Apabila kami melaksanakan kod javascript di atas. Ia hanya bergerak sekali. Kami kemudian cuba membungkus kod di atas bersama beberapa log konsol menggunakan gelung dari i=0 hingga 10. Semua log sedang dicetak. Tetapi pendengar acara masih hanya melaksanakan sekali.

Bolehkah anda membantu kami bagaimana untuk melakukan ini?

Answer 1

Anda mungkin perlu memulakan pembilang dalam skop luaran di luar fungsi panggil balik acara dan kemudian naikkannya setiap kali acara dicetuskan.

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

Anda boleh menggunakan acara mousemove dan bukannya acara mouseover. Ini akan membolehkan anda sentiasa mengemas kini kedudukan elemen semasa tetikus bergerak

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