Jak uzyskać współrzędne myszy w JavaScript

Podczas surfowania po stronach internetowych istnieje możliwość zlokalizowania nieprawidłowego kursora lub konieczne jest uzyskanie współrzędnych ogólnego dokumentu w celu przejrzystości podczas projektowania strony internetowej., lub może być konieczne utworzenie różnych sekcji na stronie internetowej i wyrównać je. W takich przypadkach uzyskanie współrzędnych myszy w JavaScript może Ci pomóc.

W tym artykule omówiono metody uzyskania współrzędnych myszy w JavaScript.

Jak uzyskać współrzędne myszy w JavaScript?

Aby uzyskać współrzędne myszy w JavaScript, „Clientx" I "klient„Właściwości można użyć z:

• "na kliknięcie" wydarzenie
• "pagex" I "Pagey„Właściwości z„addEventListener ()" metoda
• "Onmousemove”Wydarzenie i„getElementById ()" metoda

Teraz przejdziemy przez każdą z wymienionych metodologii jeden po drugim!

Metoda 1: Pobierz współrzędne myszy w JavaScript za pomocą zdarzenia onClick

„„Clientx" I "klient„Właściwości służą odpowiednio do zwrotu poziomych i pionowych współrzędnych wskaźnika myszy. Podczas gdy „na kliknięcie„Wydarzenie jest wyzwalane, gdy użytkownik kliknie element. Metody te można wdrożyć w celu uzyskania dostępu do współrzędnych myszy poziomych i pionowych poprzez zlokalizowanie najnowszej pozycji wskaźnika za pomocą określonego przycisku.

Składnia

obiekt.onClick = mousecoordinates () myscript;

W powyższej składni „Mousecoordinates ()”Odnosi się do funkcji, która zostanie wywołana po kliknięciu przycisku.

Przykład

Po pierwsze, utwórz przycisk z przekierowaniem zdarzenia OnClick do funkcji Mousecoordinates (), gdy jest uruchamiana:

Kliknij mnie, aby uzyskać współrzędne myszy

Następnie zdefiniuj funkcję o nazwie „Mousecoordinates ()”, Który traktuje to wydarzenie jako argument. Kiedy określone zdarzenia zostaną uruchomione, „Clientx" I "klient”Właściwości zwracają zaktualizowane wartości współrzędnych x i y:

funkcja mousecoordinates (zdarzenie)
dokument.Write („Współrzędne (x) =” + zdarzenie.ClientX + "
Współrzędna (y) = " + zdarzenie.klient);

Powyższa implementacja powoduje następujące dane wyjściowe:

W przypadku uzyskania współrzędnych myszy całego DOM po przewijaniu, użyj poniższej metody.

Metoda 2: Pobierz współrzędne myszy w JavaScript za pomocą właściwości Pagex i Pagey za pomocą metody addEventListener ()

„„pagex" I "Pagey„Właściwości zwracają odpowiednio współrzędne poziome i pionowe, odnosząc się do„Model obiektu dokumentu (DOM)”Na myszy i„ ”addEventListener ()„Metoda, która dołącza obsługę zdarzeń do dokumentu. Metody te można zastosować, aby uzyskać wartości współrzędnych widocznego ekranu i całego DOM po przewijaniu.

Składnia

dokument.addEventListener (Mousemove, Mousecoordinates)

W powyższej składni „Kliknij”Odnosi się do określonego wydarzenia i„MouseCoordinates”To funkcja, na której należy zastosować zdarzenie.

Przykład

Po pierwsze, dostosuj wysokość całkowitego DOM na stronie internetowej, aby uzyskać wartość współrzędnych „Pagey„Po przewinieniu:

Następnie zdefiniuj funkcję o nazwie „Mousecoordinates ()„To akceptuje zmienną”wydarzenie”Jako argument omówiony w poprzedniej metodzie. Ta konkretna zmienna zostanie wykorzystana do dostępu do wartości właściwości PageEx, Pagey, ClientX i Clients w celu uzyskania wartości współrzędnych pełnej strony internetowej i widocznego ekranu po przewijaniu:

funkcja mousecoordinates (zdarzenie)
konsola.log („pagex:”, zdarzenie.pagex,
„Pagey:”, wydarzenie.Pagey,
„ClientX:”, wydarzenie.Clientx,
„Clientty:”, wydarzenie.klient)

Na koniec dodaj wydarzenie o nazwie „Mousemove”I„ „MouseCoordinates„Jako funkcja, która zostanie wywołana, aby uzyskać współrzędne, gdy wskaźnik się porusza:

okno.addEventListener („Mousemove”, Mousecoordinates);

Wyjście

W powyższym wyjściu można zaobserwować, że podczas przewijania w dół wartość „Pagey”Wzrost wraz ze wzrostem„Oś y”Dom.

Metoda 3: Pobierz współrzędne myszy w JavaScript za pomocą metody OnMousEmove i metodę getelementbbyid ()

„„Onmousemove„Wydarzenie jest wyzwalane, gdy wskaźnik porusza się na określonym elemencie i„getElementById ()”Metoda pobiera element z określonym identyfikatorem. Metody te można zastosować w celu wyświetlania wahających się wartości współrzędnych na unoszeniu myszy na DOM.

Składnia

dokument.getElementById (elementId)

Tutaj, "ElementId”Odnosi się do określonego identyfikatora dodanego elementu.

Przykład

Po pierwsze, przypisz identyfikator o nazwie „wyjście„Do akapitu. Następnie zastosuj „Onmouse„Wydarzenie do ogólnego dokumentu i przypisz go funkcję Mousecoordinates (), które zostanie odpowiednio wywołane:

dokument.onMousEmove = MouseCoordinates;

W następnym kroku pobieraj utworzony element akapitu, określając jego identyfikator w dokumencie.GetElementById () Metoda:

var wyjście = dokument.getElementById („wyjście”);

Tutaj zdefiniuj funkcję o nazwie „Mousecoordinates ()„Biorąc to wydarzenie jako argument, jak omówiono w poprzednich metodach. W definicji funkcji użyj „Clientx" I "klient„Właściwości z wydarzeniem, aby uzyskać„X" I "Y„Współrzędne myszy po przesunięciu kursora.

Wreszcie, wyświetl odpowiednie współrzędne na DOM w odniesieniu do pozycji kursora jako innerhtml pobudzonego akapitu o nazwie „wyjście”:

funkcja mousecoordinates (zdarzenie)
var xpos = zdarzenie.clientx;
var ypos = zdarzenie.klient;
wyjście.innerhtml = "współrzędne (x):" + xpos + "" + "piksele
Współrzędne (y): „ + ypos +” „ +„ piksele ”;

Wyjście

Ten zapis skompilował metody uzyskania współrzędnych myszy w JavaScript.

Wniosek

Aby uzyskać współrzędne myszy w JavaScript, zastosuj „Clientx" I "klient„Właściwości z wydarzeniem OnClick, aby uzyskać najnowsze współrzędne myszy po kliknięciu przycisku,„pagex" I "Pagey„Właściwości i„ ”addEventListener ()”Metoda uzyskania współrzędnych zarówno ogólnego DOM, jak i bieżącego ekranu lub z„Onmousemove”Wydarzenie i„getElementById ()”Metoda wyświetlania zmieniających się współrzędnych po unoszeniu myszy. Ten blog wykazał metody uzyskania współrzędnych myszy w JavaScript.