Spostare il puntatore del mouse in una posizione specifica?


127

Sto costruendo un gioco HTML5 e sto cercando di posizionare il cursore del mouse su un certo controllo su un evento specifico in modo che lo spostamento in una direzione specifica abbia sempre lo stesso risultato. È possibile?


Se ho capito bene, vuoi spostare il cursore del mouse usando JS - questo non è possibile. Dovrai trovare un altro modo.
trenta,

1
HTML5 ha alcuni nuovi eventi del mouse ma nulla per spostare il mouse. Puoi sempre window.moveBy (x, y); spostare la finestra sotto il punto in cui si trova il mouse ... sarebbe un gioco piuttosto funky :) L'unico modo othadox che vedo che è stato fatto è tramite ActiveX - ewwww, yuk!
Jeremy Thompson,

1
No - JavaScript non ti consente di farlo, ma immagino che potrebbe esserci una soluzione alternativa che comporta lo spostamento della pagina in una posizione specifica, che "sposta" anche il cursore, utilizzando la finestra scrollTo () - vedi w3Schools su w3schools.com/jsref/met_win_scrollto.asp .
Stardust,

1
Buona fortuna con lo spostamento del mouse sugli smartphone.
Cœur

L'immagine di un mouse può essere spostata e impostare il cursore: nessuno. Non è un rischio per la sicurezza perché sei il programmatore. Se riesci a creare un gioco, puoi anche evitare il rischio di fare clic sul tuo conto bancario mentre stai giocando.

Risposte:


20

Quindi, so che questo è un vecchio argomento, ma prima dirò che non è possibile. La cosa più vicina al momento è bloccare il mouse in una singola posizione e tenere traccia delle modifiche nelle sue xey. Questo concetto è stato adottato da - sembra - Chrome e Firefox. È gestito da quello che si chiama Blocco mouse e colpire la fuga lo romperà. Dalla mia breve lettura, penso che l'idea sia di bloccare il mouse in una posizione e di segnalare eventi di movimento simili agli eventi di trascinamento della selezione.

Ecco la documentazione di rilascio:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

Ed ecco una dimostrazione abbastanza accurata: http://media.tojicode.com/q3bsp/


Lo sto prendendo come nuova risposta accettata, perché questo è esattamente il caso d'uso che stavo chiedendo, anche se non è supportato in tutti i browser.
Dennkster,

188

Non è possibile spostare il mousepointer con javascript.

Basti pensare alle implicazioni per un secondo, se potessi;)

  1. L'utente pensa: "hey vorrei fare clic su questo link"
  2. Javascript sposta il cursore del mouse su un altro collegamento
  3. L'utente fa clic sul collegamento errato e scarica inavvertitamente malware che formatta la sua c-drive e mangia le sue caramelle

74
Clickjacking REALE.
Blender

15
Pensaci, sarebbe fantastico: P
Martin Jespersen,

24
Eh, odio lottare per il controllo del cursore del mouse: BACK YOU PUBBLICITÀ, BACK I SAY!
Blender

78
Una pagina Web può forzare un download senza richiedere a nessuno di fare clic su un collegamento, quindi ciò che ritieni non sia realmente un problema di sicurezza. Tuttavia, non essere in grado di spostarsi fuori dalla finestra della pagina Web.
Dionyziz,

11
@dionyziz: c'è una grande differenza tra il download forzato in una sandbox e il download dello spazio utente avviato dall'interazione dell'utente. Le implicazioni per la sicurezza sono in realtà molto grandi.
Martin Jespersen,

88
  1. Esegui un piccolo server Web sul computer client. Può essere una piccola cosa da 100kb. Uno script Python / Perl, ecc.
  2. Includi un piccolo eseguibile C precompilato che può spostare il mouse.
  3. Eseguilo come uno script CGI tramite una semplice chiamata http, AJAX, qualunque cosa - con le coordinate in cui vuoi spostare il mouse, ad es .:

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

PS: Per qualsiasi problema, ci sono centinaia di scuse sul perché e come - non può e non dovrebbe essere fatto .. Ma in questo universo infinito, è davvero solo una questione di determinazione - sul fatto che TU lo farà accadere.


13
Penso che fossimo tutti a bordo fino a "c eseguibile" ... xD
dGRAMOP

1
un web server? forse intendi un programma con un'interfaccia http .. non c'è bisogno di web. Il linguaggio di programmazione Go potrebbe essere vantaggioso rispetto a C in quanto potrebbe semplificare l'aggiunta della parte http, o in alternativa L'interprete nodejs eseguirà il codice che potrebbe anche includere un'interfaccia http abbastanza facilmente, poiché l'interprete nodejs è costruito per renderlo facile da scrivere applicazioni server.
barlop,

3
C = 0 dipendenze. Il web è http. Nessuna homepage carina, qui .. Solo il trasporto.
Alex Gray,

+1 per PS. Possiamo eseguire chiamate CGI usando il nodo dev-server o qualcosa di simile npmjs.com/package/http-server ??
ATHER,

1
Qualcuno di voi ha mai notato il Javascripttag sotto la domanda?

80

Immagino che potresti riuscire a posizionare il cursore del mouse su una determinata area dello schermo se non utilizzassi il cursore del mouse reale (di sistema).

Ad esempio, potresti creare un'immagine per agire al posto del cursore, gestire un evento che, rilevando il mouseenter nella scena, imposta lo stile sul cursore di sistema su "none" (sceneElement.style.cursor = 'none' ), quindi visualizzerebbe un elemento immagine nascosto che agisce come cursore per trovarti ovunque nella scena in base a una traduzione predefinita di assi / rettangoli.

In questo modo, indipendentemente dal modo in cui hai spostato il cursore reale, il metodo di traduzione manterrà il cursore dell'immagine ovunque ne avessi bisogno.

modifica: un esempio in jsFiddle usando una rappresentazione dell'immagine e un movimento forzato del mouse


5
Si, puoi. Devi semplicemente impostare lo stile del cursore su un dato elemento su 'none'. Provaci.
Xaxis,

14
Questa è la risposta più ponderata. E in realtà fornisce una soluzione reale, mentre alcune altre risposte aggiungono davvero qualsiasi valore :) Ma in che modo webgl porterà giochi interessanti come FPS ecc. Quando non riusciamo a ottenere un blocco del mouse, sembra abbastanza limitante ...
Dennkster,

3
Ciò ha ancora il problema di non riuscire a "continuare a muovere" il mouse a sinistra. Una volta che il mouse lascia la pagina Web, non è possibile continuare a controllarla.
Dionyziz,

2
Questa è una soluzione perfetta a questo problema. L'unico motivo per cui ci sono persone che si lamentano è perché non è una soluzione banale. Devi fare un po 'di programmazione a volte ragazzi!
Marty,

5
ha giocato con questa idea e ha fatto un esempio in JSFiddle jsfiddle.net/jaakkytt/9uczV
Jaak Kütt

65

Ottima domanda Questo è davvero qualcosa che manca dall'API del browser Javascript. Sto anche lavorando a un gioco WebGL con il mio team e abbiamo bisogno di questa funzione. Ho aperto un problema sul bugzilla di Firefox in modo che possiamo iniziare a parlare della possibilità di avere un'API per consentire il blocco del mouse. Questo sarà utile per tutti gli sviluppatori di giochi HTML5 / WebGL là fuori.

Se ti piace, vieni qui e lascia un commento con il tuo feedback, e risolvi il problema:

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

Grazie!



51
Se ciò accade, smetterò di usare un browser. :-P Seriamente, i siti Web non richiedono il tipo di consenso che stai dando quando installi un'applicazione. Questa sarebbe una grande caratteristica se fossimo tutti bravi ragazzi che impiegassero questo livello di controllo per migliorare l'esperienza dell'utente. Sfortunatamente Internet è uno stronzo centrale, motivo per cui ci sono molte funzioni davvero pulite che speriamo non vedremo mai in un browser. Detto questo: l'API a schermo intero funzionerebbe per "bloccare" il resto del sistema operativo.
Qualcuno

4
Il consenso di @Someone verrebbe richiesto prima che tale blocco fosse possibile da un'applicazione (in modo simile al modo in cui ora è richiesto il consenso a schermo intero nei browser Web più diffusi). Inoltre, l'utente può sempre revocare il consenso premendo il tasto ESC.
dionyziz,

7
È successo. Ed è davvero fantastico (se ancora con prefisso fornitore): mdn.github.io/pointer-lock-demo
ericsoco,

1
@ericsoco Purtroppo quel link è interrotto. Questo potrebbe essere d'aiuto: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Tian van Heerden

46

È possibile rilevare la posizione del puntatore del mouse e quindi spostare la pagina Web (con la posizione del corpo relativa) in modo che passi sopra ciò su cui si desidera fare clic.

Ad esempio, puoi incollare questo codice sulla pagina corrente nella tua console del browser (e aggiornare successivamente)

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

2
Il tuo post sarebbe più prezioso se potessi pubblicare un esempio di codice che lo fa. Inoltre, vi consiglio di dare un'occhiata alle FAQ: stackoverflow.com/faq
ForceMagic

Come fai effettivamente a fare clic sull'elemento giusto una volta che l'utente fa clic?
mmm

@momomo Puoi usaredocument.getElementByID('thingtoclick').click();
cascata

1
È stato assolutamente stellare! Modo di pensare fuori dagli schemi! Dubito che fornisca davvero ciò che l'interrogante voleva, ma per quanto fico, a chi importa davvero?
gcdev,

12

Non puoi muovere un mouse ma puoi bloccarlo. Nota: è necessario chiamare requestPointerLock nell'evento clic.

Piccolo esempio:

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

Documentazione ed esempio di codice completo:

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


4

Non è possibile spostare il puntatore del mouse utilizzando JavaScript, quindi per ovvi motivi di sicurezza. Il modo migliore per ottenere questo effetto sarebbe effettivamente posizionare il controllo sotto il puntatore del mouse.


1
Le implicazioni per la sicurezza sono tutt'altro che ovvie. In effetti, recenti aggiunte agli standard introducono questa capacità senza seri problemi di sicurezza.
Dionyziz,

ma come è possibile nell'API di trascinamento della selezione?
oldboy

0

Non è possibile farlo semplicemente ottenendo la posizione effettiva del puntatore del mouse, quindi calcolando e compensando le azioni del mouse sprite / scene basate su questa compensazione?

Ad esempio, è necessario che il puntatore del mouse sia in basso al centro, ma si trova in alto a sinistra; nascondi il cursore, usa un'immagine del cursore spostata. Spostare il movimento del cursore e mappare l'input del mouse in modo che corrisponda ai clic di sprite (o "controllo") riposizionati del cursore Quando / se vengono colpiti i limiti, ricalcolare. Se / quando il cursore raggiunge effettivamente il punto desiderato, rimuovere la compensazione.

Disclaimer, non uno sviluppatore di giochi.


identico alla risposta di Xaxis, essenzialmente.
mathhead include il

@mathheadinclouds in effetti, ma è indipendente dall'implementazione del browser del blocco del mouse. Quindi, essenzialmente; ma no. Grazie per la tua opinione - Modificato: non importa. Capisco quello che stai dicendo. Immagino quindi, il mio unico pensiero sarebbe, questo qui non è inutile. C'è più laico, oltre alla risposta di Xaxis.
Eric Shoberg,

0

Interessante. Questo non è direttamente possibile per i motivi chiamati in precedenza (clic di spam e iniezione di malware), ma considera questo hack, che crea un'impressione dello stesso:

Passaggio 1: nascondi il cursore

Diciamo che hai un div, puoi usare questa proprietà css per nascondere il cursore reale:

.your_div {
    cursor: none
}

Passaggio 2: introdurre uno pseudo cursore

Basta creare un'immagine, un cursore simile e posizionarla all'interno della tua pagina web, con position = 'absolute'.

Passaggio 3: tenere traccia del movimento effettivo del mouse

Questo è facile. Controlla Internet su come ottenere la posizione reale del mouse (coordinate X e Y).

Passaggio 4: spostare il cursore pseudo

Mentre il cursore reale si sposta, sposta il tuo pseudo cursore con la stessa differenza X e Y. Allo stesso modo, puoi sempre generare un evento clic in qualsiasi posizione sulla tua pagina web con javascript magic (basta cercare in Internet su come fare).

A questo punto, puoi controllare il cursore pesudo nel modo desiderato e il tuo utente avrà l'impressione che il cursore reale si stia muovendo.

====

Avviso equo: non farlo. Nessuno vuole che il proprio cursore o computer sia controllato in questo modo, a meno che non si abbia un caso d'uso specifico o se si è determinati a fuggire via dagli utenti.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.