Come ottenere coordinate del mouse in JavaScript
Questo articolo discuterà i metodi per ottenere coordinate del mouse in JavaScript.
Come ottenere coordinate del mouse in JavaScript?
Per ottenere coordinate di mouse in JavaScript, il “ClientX" E "Clienty"Le proprietà possono essere utilizzate con:
- "al clic"Evento
- "Pagex" E "Pagey"Proprietà con"addEventListener ()" metodo
- "onmousemoveEvento "e"getElementById ()" metodo
Ora passeremo attraverso ciascuna delle metodologie elencate una per una!
Metodo 1: Ottieni coordinate del mouse in JavaScript utilizzando l'evento OnClick
IL "ClientX" E "Clienty"Le proprietà vengono utilizzate per restituire rispettivamente le coordinate orizzontali e verticali del puntatore del topo. Mentre un "al clic"L'evento viene attivato quando l'utente fa clic su un elemento. Questi metodi possono essere implementati per accedere alle coordinate del mouse orizzontale e verticale individuando l'ultima posizione del puntatore con l'aiuto di un pulsante specificato.
Sintassi
oggetto.onClick = MouseCoOrdinates () myScript;Nella sintassi sopra, "MouseCoordinates ()"Si riferisce alla funzione che verrà invocata quando si fa clic su un pulsante.
Esempio
Innanzitutto, crea un pulsante con un evento OnClick reindirizzamento alla funzione MouseCoordinates () quando viene attivato:
Successivamente, definisci una funzione chiamata "MouseCoordinates ()"Il che prende l'evento come argomento. Quando gli eventi specificati vengono attivati, il “ClientX" E "Clienty"Le proprietà restituiscono i valori delle coordinate X e Y aggiornati del mouse:
funzione mousecoordinates (event)documento.Scrivi ("coordinate (x) =" + evento.clientx + "
Coordinate (y) = " + evento.Clienty);
L'implementazione di cui sopra determina il seguente output:
Nel caso di ottenere le coordinate del mouse dell'intero DOM al momento dello scorrimento, utilizzare il metodo seguente.
Metodo 2: Ottieni coordinate del mouse in JavaScript utilizzando Pagex e Pagey Propries con metodo AddeventListener ()
IL "Pagex" E "Pagey"Le proprietà restituiscono le coordinate orizzontali e verticali, rispettivamente facendo riferimento al"Document Object Model (DOM)"Sul mouse hover e il"addEventListener ()"Metodo che allega un gestore di eventi a un documento. Questi metodi possono essere applicati per ottenere i valori di coordinate della schermata visibile e l'intero DOM al momento dello scorrimento.
Sintassi
documento.addEventListener (MouseMove, MouseCoordinates)Nella sintassi sopra, "clic"Si riferisce all'evento specificato e"mousecoordinates"È la funzione su cui è necessario applicare l'evento.
Esempio
In primo luogo, regola l'altezza del DOM complessivo nella pagina Web per ottenere il valore delle coordinate "Pagey"Dopo averlo scorciato:
Successivamente, definisci una funzione chiamata "MouseCoordinates ()"Che accetta la variabile"evento"Come argomento come discusso nel metodo precedente. Questa particolare variabile verrà utilizzata per accedere al valore di Pagex, Pagey, ClientX e Clienty Properties per ottenere i valori di coordinate della pagina Web completa e la schermata visibile al momento dello scorrimento:
funzione mousecoordinates (event)console.log ("pagex:", evento.Pagex,
"Pagey:", evento.Pagey,
"ClientX:", Evento.ClientX,
"Clienty:", Evento.Clienty)
Infine, aggiungi un evento chiamato "mousemove" e il "mousecoordinates"Come la funzione che verrà invocata per ottenere le coordinate mentre il puntatore si sta muovendo:
finestra.addEventListener ('MouseMove', MouseCoordinates);Produzione
Nell'output sopra, si può osservare che mentre scorre verso il basso, il valore di "Pagey"Aumenta con l'aumento del"asse y"Del Dom.
Metodo 3: Ottieni coordinate del mouse in JavaScript usando il metodo OnMouseMove e GetElementBbyid ()
IL "onmousemove"L'evento viene attivato quando il puntatore si muove su un elemento specifico e il"getElementById ()"Il metodo prende un elemento con un ID specificato. Questi metodi possono essere applicati per visualizzare i valori di coordinate fluttuanti sul mouse del mouse su DOM.
Sintassi
documento.getElementByID (elementID)Qui, "Elementid"Si riferisce all'ID specificato dell'elemento aggiunto.
Esempio
In primo luogo, assegna un ID chiamato "produzione"Al paragrafo. Quindi, applica il "onmouse"Evento al documento generale e assegnarlo la funzione MouseCoordinates () che verrà invocata di conseguenza:
documento.OnMouseMove = MouseCoordinates;
Nel passaggio successivo, prendi l'elemento di paragrafo creato specificando il suo ID nel documento.Metodo getElementById ():
var output = documento.getElementById ('output');Qui, definisci una funzione chiamata "MouseCoordinates ()"Prendere l'evento come argomento come discusso nei metodi precedenti. Nella sua definizione di funzione, utilizzare il "ClientX" E "Clienty"Proprietà con l'evento per ottenere il"X" E "Y"Le coordinate del mouse al momento dello spostamento del cursore.
Infine, visualizza le coordinate corrispondenti sul DOM rispetto alla posizione del cursore come interno del paragrafo recuperato chiamato "produzione":
funzione mousecoordinates (event)var xpos = evento.clientx;
var ypos = evento.Clienty;
produzione.InnerHtml = "Coordinate (x):" + xpos + "" + "pixel
Coordinate (y): " + ypos +" " +" pixel ";
Produzione
Questo articolo ha compilato i metodi per ottenere coordinate del mouse in JavaScript.
Conclusione
Per ottenere coordinate del mouse in JavaScript, applica il “ClientX" E "Clienty"Proprietà con l'evento OnClick per ottenere le ultime coordinate del mouse al clic del pulsante,"Pagex" E "Pagey"Proprietà e"addEventListener ()"Metodo per ottenere le coordinate sia del DOM complessivo che dello schermo corrente o con un"onmousemoveEvento "e"getElementById ()"Metodo per visualizzare le coordinate mutevoli al passaggio del mouse. Questo blog ha dimostrato i metodi per ottenere coordinate del mouse in JavaScript.