Javascript memindahkan mouse ke elemen

Gerakkan mouse dengan offset elemen yang ditentukan. Jika tidak ada elemen yang ditentukan, langkahnya relatif terhadap kursor mouse saat ini. Jika elemen disediakan tetapi tidak ada offset, mouse akan dipindahkan ke tengah elemen. Jika elemen tidak terlihat, elemen tersebut akan digulir ke tampilan

Perhatikan bahwa tidak ada cara untuk memindahkan penunjuk tetikus ke posisi tertentu di JavaScript. Alasan utamanya adalah hal itu dapat menimbulkan masalah keamanan bagi pengguna dan merusak pengalaman pengguna

Pada artikel ini, kita akan membuat pointer mouse palsu atau custom, yang mungkin terlihat mirip dengan pointer mouse sistem default, dan kemudian kita akan memindahkan posisinya ke posisi yang berbeda menggunakan JavaScript. Teknik memindahkan penunjuk tetikus ke posisi tertentu ini adalah untuk tujuan demonstrasi dan harus benar-benar dihindari di situs web siap produksi

Buat Struktur HTML Dasar Dengan Beberapa Gaya CSS

Kami akan membuat dua tombol di layar (satu di kiri dan satu lagi di sisi kanan layar), dan tujuan kami adalah ketika kami mengklik tombol pertama, penunjuk mouse akan secara otomatis dipindahkan ke tombol kedua di

Pertama, kita membuat dua elemen HTML di dalam HTML kita, satu tag img dan satu lagi elemen div. Tag img_ akan berisi gambar kursor kustom atau palsu yang akan kita gunakan sebagai pengganti kursor mouse sistem asli

Anda dapat menggunakan gambar kursor mouse apa pun yang Anda inginkan dari internet. div akan memiliki dua tombol, "button 1" dan "button 2" di dalamnya

Kami juga akan memberikan id_ untuk semua elemen ini sehingga kami dapat mereferensikannya di dalam JavaScript dan menatanya di dalam CSS

Cuplikan Kode - HTML

    
    Move mouse pointer
    



    


    

        Button 1
        Button 2
    

Di dalam CSS, kami menyembunyikan pointer mouse sistem asli dari seluruh halaman dengan bantuan properti cursor: none CSS di dalam tanda bintang (*), juga dikenal sebagai pemilih universal CSS. Kemudian kita akan menambahkan flexbox ke elemen div agar ada spasi di antara keduanya

Pada tag img_, kursor khusus kami akan menambahkan properti

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

2 sehingga tidak ada peristiwa pointer yang dapat diterapkan padanya. Anda dapat mempelajari lebih lanjut tentang pointer-events di MDN, dan kami akan membuatnya absolut sehingga kami dapat memindahkannya ke mana saja di layar

Gunakan JavaScript Untuk Memindahkan Penunjuk Mouse ke Posisi Tertentu

Sekarang mari kita terapkan fungsionalitasnya menggunakan JavaScript. Pertama, kita akan mengambil semua elemen kursor,

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

3 dan

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

4, menggunakan metode

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

5 di dalam JavaScript

Karena kita ingin memindahkan kursor mouse ke posisi tertentu, dalam hal ini, pada

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

6, pertama-tama kita harus mengambil posisi (kiri, atas, lebar, tinggi) dari

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

6 sehingga ketika kita mengklik

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

8, penunjuk mouse akan

Untuk ini, kita akan menggunakan metode img0 pada

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

4, yang akan memberi kita objek yang berisi berbagai posisi dan dimensi seperti kiri, atas, bawah, lebar, tinggi, dll. , dan kami akan menyimpan objek ini di dalam variabel yang disebut img2. Kemudian kita akan menghitung img_3 dan img4 dari

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

6, sehingga kita dapat mengarahkan penunjuk mouse ke tengah

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

6 saat mengklik

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

8

Penunjuk mouse khusus kami tidak bergerak di layar pada posisi ini. Untuk membuatnya bergerak bebas di browser, kita harus menambahkan event listener ke objek window

Metode ini mengambil dua parameter, yang pertama adalah jenis event di mana kita ingin mengeksekusi suatu fungsi, dan yang kedua adalah fungsi itu sendiri yang akan dieksekusi ketika event tersebut dipicu.

Karena kami ingin memindahkan pointer mouse kustom kami, kami akan menggunakan acara img8 sebagai parameter pertama kami, dan kemudian di dalam fungsi panggilan balik kami, kami akan mengambil koordinat img9 dan div0, dan kemudian kami akan menetapkannya ke div1 dan div2

Jangan lupa untuk menambahkan div_3 di bagian akhir;

Cuplikan Kode - JavaScript

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

_

Pada tahap ini, kursor mouse custom akan bergerak seperti kursor mouse biasa. Sekarang kita akan memindahkan kursor mouse khusus ke posisi tertentu

Untuk itu, kami akan menambahkan acara div4 pada

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

3 dan kemudian mengatur posisi kursor mouse div1 dan div2 dengan posisi img3 dan img4

Keluaran

Kesimpulan

Tidak ada cara langsung untuk mengubah posisi tetikus menggunakan JavaScript, karena memiliki beberapa kekurangan. Tetapi selalu ada cara berbeda dan tidak resmi dalam melakukan sesuatu dalam pemrograman

Untuk mengatasi masalah memindahkan penunjuk tetikus ke posisi tertentu, kita harus menyembunyikan penunjuk tetikus asli. Kemudian, kami memiliki dua untuk membuat pointer mouse khusus kami dan menulis beberapa kode JavaScript untuk memindahkannya ke posisi tertentu

Bagaimana cara mendapatkan elemen mouse over di JavaScript?

Bagaimana cara menggerakkan mouse di JavaScript?

Saat mouse bergerak di atas suatu elemen?

Bagaimana cara mengubah posisi kursor di JavaScript?