Jak śledzić pozycję myszy w JavaScript

Śledzenie pozycji myszy to interesujące zadanie, które śledzi współrzędne wskaźnika. Wyodrębnia współrzędne X i Y całej strony lub określony obszar zdefiniowany przez użytkownika. JavaScript zapewnia „Clientx” I „Klient” właściwości do śledzenia wskaźnika myszy w bieżącym oknie. Te właściwości dowiadują się, gdzie mysz użytkownika leży we współrzędnych X i Y okna przeglądarki. W tym poście zademonstrujemy drogę śledzenia pozycji myszy.

Jak śledzić pozycję myszy w JavaScript?

W JavaScript dwie właściwości, „Clientx” I „Klient”, są wykorzystywane do śledzenia pozycji myszy w widocznym obszarze przeglądarki. Obie właściwości są wykonywane w określonym obszarze dostarczonym przez użytkownika.

Składnia „Clientx" I "klient„Właściwości podano poniżej:

Składnia klientax

wydarzenie.Clientx

„„Clientx”Zwraca osi poziomą wskaźnika myszy.

Składnia klienta

wydarzenie.Clientx

Podobnie „Klient” właściwość zwraca oś pionową z ruchem wskaźnika myszy.

Przykład

Przykład wyjaśnia użycie śledzenia pozycji myszy w JavaScript.

Kod HTML

Przykład do śledzenia pozycji myszy w JavaScript

X Pozycja myszy: .

Y Pozycja myszy: .

Wyjaśnienie kodu jest następujące:

• Po pierwsze, div Tag jest tworzony i „div1”Identyfikator jest przypisany do niego.
• Różne właściwości, w tym wysokość, szerokość, granica, I pozycja, są stosowane wewnątrz etykietka.
• Potem getCursorposition () Metoda jest wykorzystywana przez przekazywanie "wydarzenie".
• Potem „Pozycja myszy X” I „Pozycja myszy” są ekstrahowane ruchem kursora.
• W końcu przypisana jest ścieżka źródłowa pliku JavaScript "test.JS ” w etykietka.

Kod dla „test.JS„Plik znajduje się poniżej:

Kod JavaScript

funkcja getCursorposition (zdarzenie)
dokument.getElementById („c_p_x”).TextContent = zdarzenie.clientx;
dokument.getElementById („c_p_y”).TextContent = zdarzenie.klient;

W tym kodzie:

• Po pierwsze, getCursorposition () Metoda jest wywoływana i przekazano argument wymieniony "wydarzenie".
• Potem dokument.GetElementById jest wykorzystywany do wyodrębnienia elementów HTML, których identyfikatory są „C_P_X” I „C_P_Y”.
• wydarzenie.Clientx zwraca współrzędną poziomą na podstawie obszaru klienta i "wydarzenie.klient ” jest stosowany przez zwracanie pionowej współrzędnej w przeglądarce.

Wyjście

Wyjście to pokazuje „Pozycja myszy X” I „Pozycja myszy” są śledzone przez zmianę pozycji myszy w przeglądarce.

Wniosek

W JavaScript, „Clientx” I „Klient” właściwości śledzą pozycję myszy. Właściwości te można połączyć z funkcją zdefiniowaną przez użytkownika, aby uzyskać współrzędne pozycji myszy. Ten post wykazał metodę śledzenia pozycji myszy w JavaScript za pomocą „Clientx" I "klient" nieruchomości. Praktykowany tutaj przykład pokazuje, że X-współrzędny I współrzędny y są dynamicznie aktualizowane za każdym razem, gdy mysz się porusza.