Pindahkan penunjuk mouse ke posisi tertentu?

127

Saya sedang membangun permainan HTML5 dan saya mencoba untuk meletakkan kursor mouse di atas kontrol tertentu pada peristiwa tertentu sehingga bergerak ke arah tertentu selalu memiliki hasil yang sama. Apakah ini mungkin?

Dennkster
sumber
Jika saya mengerti dengan benar, Anda ingin memindahkan kursor mouse menggunakan JS - ini tidak mungkin. Anda harus menemukan cara lain.
tigapuluh
1
HTML5 memiliki beberapa Acara Mouse baru tetapi tidak ada yang memindahkan mouse. Anda selalu bisa window.moveBy (x, y); untuk memindahkan jendela di bawah tempat mouse melayang .. itu akan menjadi permainan yang cukup funky :) Satu-satunya cara othadox yang saya lihat sedang dilakukan adalah melalui ActiveX - ewwww, yuk!
Jeremy Thompson
1
Tidak - JavaScript tidak akan membiarkan Anda melakukan itu, tapi saya kira mungkin ada solusi yang melibatkan memindahkan halaman ke lokasi tertentu, yang akan "memindahkan" kursor juga, menggunakan jendela scrollTo () - lihat w3Schools di w3schools.com/jsref/met_win_scrollto.asp .
Stardust
1
Semoga berhasil dengan menggerakkan mouse di smartphone.
Cœur
Gambar mousepointer dapat dipindahkan dan mengatur kursor: tidak ada. Ini bukan risiko keamanan karena Anda adalah programmer. Jika Anda dapat membuat game, Anda juga dapat menghindari risiko mengklik ke dalam rekening bank Anda saat Anda bermain game.

Jawaban:

20

Jadi, saya tahu ini adalah topik lama, tapi pertama-tama saya katakan itu tidak mungkin. Hal terdekat saat ini adalah mengunci mouse ke satu posisi, dan melacak perubahan dalam x dan y. Konsep ini telah diadopsi oleh - sepertinya - Chrome dan Firefox. Ini dikelola oleh apa yang disebut Mouse Lock , dan memukul melarikan diri akan merusaknya. Dari pembacaan singkat saya , saya pikir idenya adalah bahwa itu mengunci mouse ke satu lokasi, dan melaporkan acara gerak yang mirip dengan acara klik dan seret.

Berikut dokumentasi rilisnya:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

Dan inilah demonstrasi yang cukup rapi: http://media.tojicode.com/q3bsp/

Tukang kode
sumber
Saya menganggap ini sebagai jawaban yang diterima baru, karena ini adalah kasus penggunaan yang saya minta, meskipun tidak didukung di semua browser.
Dennkster
188

Anda tidak dapat memindahkan mousepointer dengan javascript.

Pikirkan implikasinya sebentar, jika Anda bisa;)

  1. Pengguna berpikir: "hei saya ingin mengklik tautan ini"
  2. Javascript memindahkan kursor ke tautan lain
  3. Pengguna mengklik tautan yang salah dan secara tidak sengaja mengunduh malware yang memformat c-drive-nya dan memakan permennya
Martin Jespersen
sumber
74
Clickjacking NYATA.
Blender
15
Kalau dipikir-pikir, ini akan luar biasa: P
Martin Jespersen
24
Heh, saya akan benci berjuang untuk mengontrol kursor mouse saya: KEMBALI IKLAN ANDA, KEMBALI SAYA KATAKAN!
Blender
78
Laman web dapat memaksa unduhan tanpa mengharuskan siapa pun mengklik tautan, jadi yang Anda klaim sebenarnya bukan masalah keamanan. Namun, tidak dapat bergerak di luar jendela halaman web.
dionyziz
11
@dionyziz: Ada perbedaan yang cukup besar antara pengunduhan paksa ke kotak pasir dan kemudian pengunduhan userspace dimulai dengan interaksi pengguna. Implikasi keamanan sebenarnya sangat besar.
Martin Jespersen
88
  1. Jalankan server web kecil di mesin klien. Bisa jadi hal kecil 100kb. Skrip Python / Perl, dll.
  2. Sertakan executable C kecil yang telah dikompilasi yang dapat menggerakkan mouse.
  3. Jalankan sebagai skrip CGI melalui panggilan http sederhana, AJAX, apa pun - dengan koordinat yang ingin Anda pindahkan mouse, misalnya:

    http://localhost:9876/cgi/mousemover?x=200&y=450

PS: Untuk masalah apa pun, ada ratusan alasan mengapa, dan bagaimana - itu tidak bisa, dan tidak boleh - dilakukan .. Tapi di alam semesta yang tak terbatas ini, itu benar-benar hanya masalah tekad - apakah ANDA akan mewujudkannya.

Alex Gray
sumber
13
Saya pikir kita semua berada di papan sampai "c dieksekusi" ... xD
dGRAMOP
1
server web? mungkin maksud Anda sebuah program dengan antarmuka http .. tidak perlu untuk web. Bahasa pemrograman Go mungkin lebih menguntungkan daripada C karena mungkin membuatnya lebih mudah untuk menambahkan bagian http, atau sebagai alternatif, interpreter nodejs akan menjalankan kode yang juga dapat mencakup antarmuka http dengan mudah, karena interpreter nodejs dibangun untuk membuatnya mudah untuk tulis aplikasi server.
barlop
3
C = 0 dependensi. Web adalah http. Tidak ada homepage lucu, di sini .. Hanya transportasi.
Alex Gray
+1 untuk PS. Bisakah kita melakukan panggilan CGI menggunakan node dev-server atau yang serupa npmjs.com/package/http-server ??
ATHER
1
Apakah ada di antara Anda yang pernah memperhatikan Javascripttanda di bawah pertanyaan?
80

Saya akan membayangkan Anda bisa mencapai menempatkan kursor mouse ke area layar tertentu jika Anda tidak menggunakan kursor mouse (sistem) nyata.

Misalnya, Anda dapat membuat gambar untuk bertindak di tempat kursor Anda, menangani peristiwa yang ketika mendeteksi mouseenter ke dalam adegan Anda, mengatur gaya pada kursor sistem ke 'tidak ada' ( sceneElement.style.cursor = 'none'), kemudian akan memunculkan akting elemen gambar tersembunyi yang bertindak sebagai kursor ke mana pun Anda suka dengan adegan berdasarkan pada terjemahan kotak sumbu / pembatas yang telah ditentukan.

Dengan cara ini, tidak peduli bagaimana Anda memindahkan kursor nyata, metode terjemahan Anda akan menjaga kursor gambar Anda di mana pun Anda membutuhkannya.

sunting: contoh di jsFiddle menggunakan representasi gambar dan gerakan mouse secara paksa

Xaksis
sumber
5
Ya kamu bisa. Anda cukup mengatur gaya kursor pada elemen yang diberikan ke 'tidak ada'. Cobalah.
Xaxis
14
Ini adalah jawaban yang paling bijaksana. Dan sebenarnya memberikan solusi nyata, sementara beberapa jawaban lain benar-benar menambah nilai :) Tapi bagaimana webgl akan membawa game menarik seperti FPS dll ketika kita tidak bisa mendapatkan kunci mouse, kedengarannya sangat membatasi ...
Dennkster
3
Itu masih memiliki masalah karena tidak bisa "terus menggerakkan" mouse Anda ke kiri. Setelah mouse meninggalkan halaman web, Anda tidak bisa terus mengendalikannya.
dionyziz
2
Ini adalah solusi sempurna untuk masalah ini. Satu-satunya alasan ada orang mengeluh adalah karena itu bukan solusi sepele. Anda harus melakukan pemrograman kadang-kadang kawan!
Marty
5
bermain-main dengan ide ini dan membuat contoh di JSFiddle jsfiddle.net/jaakkytt/9uczV
Jaak Kütt
65

Pertanyaan yang bagus Ini benar-benar sesuatu yang hilang dari API browser Javascript. Saya juga sedang mengerjakan game WebGL dengan tim saya, dan kami membutuhkan fitur ini. Saya membuka masalah pada bugzilla Firefox sehingga kita dapat mulai berbicara tentang kemungkinan memiliki API untuk memungkinkan penguncian mouse. Ini akan berguna untuk semua pengembang game HTML5 / WebGL di luar sana.

Jika Anda suka, datang dan tinggalkan komentar dengan umpan balik Anda, dan angkat masalah:

https://bugzilla.mozilla.org/show_bug.cgi?id=630979

Terima kasih!

dionyziz
sumber
9
Pembaruan: bugzilla.mozilla.org/show_bug.cgi?id=633602 dan spesifikasi w3 untuk kunci penunjuk: dvcs.w3.org/hg/pointerlock/raw-file/default/index.html
Chris Anderson
51
Jika ini terjadi, saya akan berhenti menggunakan browser. :-P Serius, situs web tidak memerlukan jenis persetujuan yang Anda berikan saat memasang aplikasi. Ini akan menjadi fitur yang hebat jika kita semua adalah orang baik yang menggunakan tingkat kontrol ini untuk meningkatkan pengalaman pengguna. Sayangnya Internet adalah brengsek-pusat, itulah sebabnya ada banyak fitur yang benar-benar rapi yang semoga tidak akan kita lihat di browser. Yang sedang berkata: API layar penuh akan bekerja untuk "mengunci" sisa OS.
Seseorang
4
@Someone Consent akan diminta sebelum kunci semacam itu dimungkinkan oleh aplikasi (mirip dengan bagaimana izin layar penuh diminta sekarang di browser web populer). Selain itu, pengguna selalu dapat mencabut persetujuan dengan menekan kunci ESC.
dionyziz
7
Itu terjadi. Dan itu cukup luar biasa (jika masih diawali dengan vendor): mdn.github.io/pointer-lock-demo
ericsoco
1
@ ericsoco Sayangnya tautan itu rusak. Ini mungkin membantu: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Tian van Heerden
46

Anda dapat mendeteksi posisi penunjuk mouse dan kemudian memindahkan halaman web (dengan posisi tubuh relatif) sehingga mereka mengarahkan kursor pada apa yang Anda ingin mereka klik.

Sebagai contoh, Anda dapat menempelkan kode ini pada halaman saat ini di konsol browser Anda (dan menyegarkan setelahnya)

var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
    $(this).css({
        position: 'relative',
        left: (event.pageX - upvote_position.left - 22) + 'px',
        top: (event.pageY - upvote_position.top - 35) + 'px'
    });        
});
Amish G
sumber
2
Posting Anda akan lebih berharga jika Anda dapat memposting contoh kode yang melakukannya. Juga, saya menyarankan Anda untuk melihat ke FAQ: stackoverflow.com/faq
ForceMagic
Bagaimana Anda mengklik elemen yang benar setelah pengguna mengklik?
mmm
@momomo Anda dapat menggunakandocument.getElementByID('thingtoclick').click();
cascading-style
1
Itu benar-benar bintang! Cara berpikir di luar kotak! Saya ragu itu benar-benar memberikan apa yang diinginkan si penanya, tetapi sekeren itu, siapa yang peduli?
gcdev
12

Anda tidak bisa menggerakkan mouse tetapi bisa menguncinya. Catatan: bahwa Anda harus memanggil requestPointerLock di acara klik.

Contoh kecil:

var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

Dokumentasi dan contoh kode lengkap:

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

Dmitry Bosikov
sumber
4

Anda tidak dapat memindahkan pointer mouse menggunakan javascript, dan karenanya untuk alasan keamanan yang jelas. Cara terbaik untuk mencapai efek ini adalah dengan menempatkan kontrol di bawah penunjuk tetikus.

Sheavi
sumber
1
Implikasi keamanan jauh dari jelas. Bahkan, penambahan standar baru-baru ini memperkenalkan kemampuan ini tanpa masalah keamanan yang serius.
dionyziz
tapi lalu bagaimana mungkin di drag and drop API?
oldboy
0

Tidak bisakah ini hanya dilakukan dengan mendapatkan posisi aktual dari pointer mouse kemudian menghitung dan mengkompensasi tindakan mouse sprite / scene berdasarkan kompensasi ini?

Misalnya Anda memerlukan penunjuk tetikus untuk berada di tengah bawah, tetapi kursor itu berada di kiri atas; sembunyikan kursor, gunakan gambar kursor bergeser. Menggeser gerakan kursor dan memetakan input tetikus untuk mencocokkan sprite kursor yang diposisikan kembali (atau 'kontrol') klik Ketika / jika batas-batas dipukul, hitung ulang. Jika / ketika kursor benar-benar mencapai titik yang Anda inginkan, hapus kompensasi.

Penafian, bukan pengembang game.

Eric Shoberg
sumber
identik dengan jawaban Xaxis, pada dasarnya.
mathheadinclouds
@ mathheadinclouds memang, tetapi tidak tergantung pada implementasi browser dari kunci-mouse. Jadi, pada dasarnya; tapi tidak. Terima kasih atas pendapat Anda. - Diedit: Tidak apa-apa. Saya mengerti apa yang Anda katakan. Saya kira kemudian, satu-satunya pikiran saya adalah, ini tidak berguna. Ada lebih banyak orang awam untuk itu, daripada jawaban Xaxis.
Eric Shoberg
0

Menarik. Ini tidak mungkin secara langsung karena alasan yang disebutkan sebelumnya (klik spam dan injeksi malware), tetapi pertimbangkan peretasan ini, yang menciptakan kesan yang sama:

Langkah 1: Sembunyikan kursor

Katakanlah Anda memiliki div, Anda dapat menggunakan properti css ini untuk menyembunyikan kursor asli:

.your_div {
    cursor: none
}

Langkah 2: Perkenalkan kursor semu

Cukup buat gambar, mirip kursor, dan letakkan di halaman web Anda, dengan position = 'absolute'.

Langkah 3: Lacak pergerakan mouse sebenarnya

Ini mudah. Periksa internet tentang cara mendapatkan lokasi mouse nyata (koordinat X & Y).

Langkah 4: Pindahkan kursor semu

Saat kursor aktual bergerak, gerakkan kursor semu Anda dengan perbedaan X & Y yang sama. Demikian pula, Anda selalu dapat menghasilkan acara klik di lokasi mana pun di halaman web Anda dengan sihir javascript (cukup cari di internet tentang caranya).

Sekarang pada titik ini, Anda dapat mengontrol kursor pesudo seperti yang Anda inginkan, dan pengguna Anda akan mendapat kesan bahwa kursor nyata bergerak.

====

Peringatan Adil: Jangan lakukan itu. Tidak seorang pun ingin kursor atau komputer mereka dikendalikan dengan cara ini, kecuali jika Anda memiliki beberapa kasus penggunaan tertentu, atau jika Anda bertekad untuk melarikan diri dari pengguna Anda.

Sanjay Verma
sumber