So verfolgen Sie die Maus Position in JavaScript

Das Verfolgen einer Mausposition ist eine interessante Aufgabe, die die Koordinaten des Zeigers verfolgt. Es extrahiert die X- und Y -Koordinaten der gesamten Webseite oder des vom Benutzer definierten Bereichs oder angegebener Bereich. JavaScript bietet "Clientx" Und "Clienty" Eigenschaften, um den Mauszeiger im aktuellen Fenster zu verfolgen. Diese Eigenschaften finden heraus, wo die Maus des Benutzers in den X- und Y -Koordinaten des Browserfensters liegt. In diesem Beitrag werden wir den Weg zur Verfolgung einer Mausposition demonstrieren.

So verfolgen Sie die Maus Position in JavaScript?

In JavaScript zwei Eigenschaften, "Clientx" Und "Clienty", werden verwendet, um eine Mausposition im sichtbaren Bereich des Browsers zu verfolgen. Beide Eigenschaften werden in einem vom Benutzer bereitgestellten Bereich ausgeführt.

Die Syntax der “Clientx" Und "ClientyIm Folgenden finden Sie Eigenschaften:

Syntax von Clientx

Fall.Clientx

Der "Clientx”Gibt die horizontale Achse des Mauszeigers zurück.

Syntax der Clientie

Fall.Clientx

Ebenso die "Clienty" Eigenschaft gibt die vertikale Achse mit der Bewegung des Mauszeigers zurück.

Beispiel

Das Beispiel erläutert die Verwendung der Verfolgung der Mausposition in JavaScript.

HTML Quelltext

Beispiel, um die Maus Position in JavaScript zu verfolgen

X Maus Position: .

Y Maus Position: .

Die Erklärung des Code ist wie folgt:

• Erstens die div Tag wird erstellt und eine “Div1ID wird ihm zugewiesen.
• Verschiedene Eigenschaften, einschließlich Höhe, Breite, Grenze, Und Position, werden innerhalb angewendet Schild.
• Danach die GetCursorposition () Methode wird durch Übergeben eines verwendet "Fall".
• Danach die "X -Maus Position" Und "Y Maus Position" werden mit der Cursorbewegung extrahiert.
• Am Ende wird der Quellpfad der JavaScript -Datei zugewiesen "prüfen.JS ” innerhalb Schild.

Der Code für die “prüfen.JSDie Datei wird unten angegeben:

JavaScript -Code

Funktion getCursorposition (Ereignis)
dokumentieren.getElementById ("c_p_x").TextContent = Ereignis.clientx;
dokumentieren.getElementById ("c_p_y").TextContent = Ereignis.Kunde;

In diesem Code:

• Erstens die GetCursorposition () Methode wird aufgerufen und ein Argument genannt "Fall".
• Danach die dokumentieren.GetelementById wird verwendet, um die HTML -Elemente zu extrahieren, deren IDs sind "C_P_X" Und "C_P_Y".
• Der Fall.Clientx Gibt die horizontale Koordinate basierend auf dem Kundenbereich und dem zurück "Fall.Kunde “ wird verwendet, indem die vertikale Koordinate im Browser zurückgegeben wird.

Ausgang

Die Ausgabe zeigt das "X -Maus Position" Und "Y Maus Position" werden verfolgt, indem die Mausposition im Browser geändert wird.

Abschluss

In JavaScript die "Clientx" Und "Clienty" Eigenschaften verfolgen die Maus Position. Diese Eigenschaften können mit einer benutzerdefinierten Funktion kombiniert werden, um die Koordinaten der Mausposition zu erhalten. Dieser Beitrag hat die Methode zur Verfolgung der Mausposition in JavaScript mithilfe der “gezeigtClientx" Und "Clienty" Eigenschaften. Das hier geübte Beispiel zeigt, dass die X-Koordinate Und Y-Koordinate werden dynamisch aktualisiert, wenn sich eine Maus bewegt.