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 layarGunakan 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 JavaScriptKarena 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 img
0 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 img
2. Kemudian kita akan menghitung img
_3 dan img
4 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";
}]
8Penunjuk 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 img
8 sebagai parameter pertama kami, dan kemudian di dalam fungsi panggilan balik kami, kami akan mengambil koordinat img
9 dan div
0, dan kemudian kami akan menetapkannya ke div
1 dan div
2
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 div
4 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 div
1 dan div
2 dengan posisi img
3 dan img
4Keluaran
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