Rumah > Soal Jawab > teks badan
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粉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; }
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; });