Come tracciare la posizione del mouse in JavaScript

Il monitoraggio di una posizione del mouse è un compito interessante che traccia le coordinate del puntatore. Estrae le coordinate xey di tutta la pagina Web o l'area specificata definita dall'utente. JavaScript fornisce "ClientX" E "Clienty" Proprietà per tracciare il puntatore del mouse nella finestra corrente. Queste proprietà scoprono dove si trova il mouse dell'utente nelle coordinate X e Y della finestra del browser. In questo post, dimostreremo la strada per il monitoraggio di una posizione del mouse.

Come tracciare la posizione del mouse in JavaScript?

In JavaScript, due proprietà, "ClientX" E "Clienty", sono utilizzati per il monitoraggio di una posizione del mouse nell'area visibile del browser. Entrambe le proprietà sono eseguite in un'area specificata fornita dall'utente.

La sintassi del "ClientX" E "Clienty"Le proprietà sono fornite di seguito:

Sintassi di clientX

evento.ClientX

IL "ClientX"Restituisce l'asse orizzontale del puntatore del topo.

Sintassi di Clienty

evento.ClientX

Allo stesso modo, il "Clienty" La proprietà restituisce l'asse verticale con il movimento del puntatore del topo.

Esempio

L'esempio spiega l'utilizzo del monitoraggio della posizione del mouse in JavaScript.

Codice HTML

Esempio per tracciare la posizione del mouse in JavaScript

X Posizione del mouse: .

Y Posizione del mouse: .

La spiegazione del codice è la seguente:

• In primo luogo, il div il tag è creato e un "Div1"L'id è assegnato.
• Proprietà diverse, tra cui altezza, larghezza, confine, E posizione, sono applicati all'interno etichetta.
• Dopodiché, il getCursorPosition () Il metodo viene utilizzato passando un "evento".
• Dopodiché, il "X Posizione del mouse" E "Y Posizione del mouse" sono estratti con il movimento del cursore.
• Alla fine, viene assegnato il percorso di origine del file JavaScript "test.JS " entro etichetta.

Il codice per il "test.js"Il file è fornito di seguito:

Codice JavaScript

funzione getCursorPosition (evento)
documento.getElementById ("C_P_X").TextContent = evento.clientx;
documento.getElementById ("C_P_Y").TextContent = evento.Clienty;

In questo codice:

• In primo luogo, il getCursorPosition () il metodo viene chiamato e viene superato un argomento nominato "evento".
• Dopodiché, il documento.getelementbyid viene utilizzato per estrarre gli elementi HTML i cui ID sono "C_P_X" E "C_P_Y".
• IL evento.ClientX restituisce la coordinata orizzontale in base all'area del cliente e "evento.Clienty " è impiegato restituendo la coordinata verticale nel browser.

Produzione

L'output lo mostra "X Posizione del mouse" E "Y Posizione del mouse" vengono tracciati modificando la posizione del mouse nel browser.

Conclusione

In JavaScript, il "ClientX" E "Clienty" Proprietà Traccia la posizione del mouse. Queste proprietà possono essere combinate con una funzione definita dall'utente per ottenere le coordinate della posizione del mouse. Questo post ha dimostrato il metodo per tracciare la posizione del mouse in JavaScript usando "ClientX" E "Clienty" proprietà. L'esempio praticato qui mostra che il X-coordinate E Y-coordinato vengono aggiornati dinamicamente ogni volta che un mouse si muove.