Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk menggunakan addEventListener dengan betul?

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粉512363233P粉512363233220 hari yang lalu359

membalas semua(2)saya akan balas

  • P粉727416639

    P粉7274166392024-04-02 15:44:08

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

    balas
    0
  • P粉605233764

    P粉6052337642024-04-02 00:31:44

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

    balas
    0
  • Batalbalas