Bagaimana untuk menggunakan addEventListener dengan betul?
P粉512363233
P粉512363233 2024-04-01 17:35:47
0
2
406

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?

P粉512363233
P粉512363233

membalas semua(2)
P粉727416639

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;
}
P粉605233764

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;
});
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan