Jak używać zdarzeń wskaźnikowych w JavaScript

Kluczowe dania na wynos

• Aby zaspokoić potrzeby szerszego grona odbiorców, aplikacje internetowe powinny obsługiwać szereg urządzeń wejściowych, a nie tylko mysz.
• Zdarzenia wskaźnika w JavaScript obsługują zarówno zdarzenia myszy, jak i dotyku, eliminując potrzebę ich osobnej implementacji.
• Zdarzenia wskaźnika mają podobne nazwy i funkcje jak zdarzenia myszy, co ułatwia aktualizację istniejącego kodu w celu obsługi wprowadzania danych za pomocą dotyku i pióra.

Wiele aplikacji internetowych zakłada, że ​​urządzeniem wskazującym użytkownika będzie mysz, dlatego do obsługi interakcji wykorzystują zdarzenia myszy. Jednak wraz ze wzrostem liczby urządzeń z ekranem dotykowym użytkownicy nie potrzebują myszy do interakcji ze stronami internetowymi. Aby zaspokoić potrzeby jak najszerszego grona odbiorców, niezbędna jest obsługa różnych urządzeń wejściowych.

JavaScript ma nowszy standard zwany zdarzeniami wskaźnikowymi. Obsługuje zarówno zdarzenia myszy, jak i dotyku, więc nie musisz się martwić o ich osobną implementację.

Co to są zdarzenia wskaźnikowe?

Zdarzenia wskaźnika to standard sieciowy, który definiuje ujednolicony sposób obsługi różnych metod wprowadzania danych w przeglądarce internetowej, w tym myszy, dotyku i pióra. Zdarzenia te zapewniają spójny i niezależny od platformy sposób interakcji z treściami internetowymi na różnych urządzeniach.

Krótko mówiąc, zdarzenia wskaźnikowe pomagają obsłużyć tę grupę interakcji użytkownika, niezależnie od źródła.

Rodzaje zdarzeń wskaźnikowych

Zdarzenia wskaźnika nazywane są podobnie do zdarzeń myszy, które być może już znasz. Dla każdego wydarzenie myszy w JavaScript istnieje odpowiednik wskaźnikZdarzenie. Oznacza to, że możesz ponownie odwiedzić swój stary kod i zmienić opcję „mysz” na „wskaźnik”, aby rozpocząć obsługę wprowadzania za pomocą dotyku i pióra.

Poniższa tabela przedstawia różne zdarzenia wskaźnika w porównaniu ze zdarzeniami myszy:

Możesz zobaczyć, że istnieją trzy dodatkowe zdarzenia wskaźnika bez odpowiadających im zdarzeń myszy. O tych wydarzeniach dowiesz się później.

Używanie zdarzeń wskaźnikowych w JavaScript

Zdarzeń wskaźnika można używać w taki sam sposób, jak zdarzeń myszy. Podobnie jak większość obsługi zdarzeń, proces zwykle przebiega według następującego schematu:

1. Użyj selektora DOM aby pobrać element.
2. Używając dodajEventListener metodę, określ interesujące Cię wydarzenie i funkcję wywołania zwrotnego.
3. Użyj właściwości i metod argumentu wywołania zwrotnego, an Wydarzenie obiekt.

Oto przykład użycia zdarzenia pointermove:

// Get the target element
const target = document.getElementById('target');
// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);
// Function to handle pointer move event
functionhandlePointerMove(ev) {
// Handle the event however you want to
 target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Ten blok kodu definiuje element docelowy i funkcję JavaScript obsługiwać wskaźnikruch zdarzenie, następnie używa a Detektor zdarzeń JavaScript aby dołączyć zdarzenie wskaźnika i funkcję do elementu docelowego.

Używając tego kodu, element z identyfikatorem „docelowym” wyświetli współrzędne wskaźnika, gdy najedziesz na niego kursorem, palcem lub piórem:

W ten sam sposób możesz używać innych zdarzeń wskaźnikowych.

Wskaźnikanuluj wydarzenie

Zdarzenie pointercancel zostaje wywołane, gdy inne zdarzenie wskaźnika zostanie przerwane, zanim zakończy ono swoje działanie zgodnie z pierwotnymi zamierzeniami. Zwykle przeglądarka anuluje wszelkie zdarzenia wskaźnikowe, które mogły wcześniej działać. Jest wiele powodów, dla których a wskaźnikanuluj zdarzenie może wywołać, na przykład:

• Gdy użytkownik odbierze połączenie telefoniczne lub inne powiadomienie zakłócające podczas przeciągania elementu po ekranie.
• Gdy zmienia się orientacja urządzenia.
• Gdy okno przeglądarki traci ostrość.
• Gdy użytkownik przełącza się na inną kartę lub aplikację.

Z wskaźnikanuluj przypadku, możesz sobie poradzić z tymi sytuacjami, jak chcesz. Oto przykład:

const target = document.getElementById('target');
target.addEventListener('pointercancel', (event) => {
// Handle the situation where the pointer cancels. For example, you
// can release the pointer capture
 target.releasePointerCapture(event.pointerId);
});

Przechwytywanie wskaźnika

Przechwytywanie wskaźnika to funkcja, która pozwala na określony Element HTML przechwytuje i reaguje na wszystkie zdarzenia wskaźnika dla określonego wskaźnika, nawet jeśli te zdarzenia występują poza granicami elementu.

Możesz ustawić przechwytywanie wskaźnika dla elementu za pomocą setpointercapture() metodę i zwolnij przechwytywanie wskaźnika za pomocą metody punkt zwolnieniaprzechwytywania() metoda.

The mampointercapture I przechwytywanie utraconego punktu zdarzenia wskaźnikowe są przydatne do przechwytywania wskaźników.

Wydarzenie gotpointercapture

The mampointercapture zdarzenie zostaje wywołane za każdym razem, gdy element uzyska przechwycenie wskaźnika. Możesz użyć tego zdarzenia, aby zainicjować stan elementu HTML do obsługi zdarzeń wskaźnikowych. Na przykład w aplikacji do rysowania możesz użyć mampointercapture zdarzenie, aby ustawić początkową pozycję kursora.

Wydarzenie Lospointercapture

The przechwytywanie utraconego punktu zdarzenie zostaje wywołane, gdy element utraci przechwycenie wskaźnika. Można go użyć do oczyszczenia lub usunięcia stanu powstałego, gdy element uzyskał przechwycenie wskaźnika. W aplikacji do rysowania możesz chcieć użyć przechwytywanie utraconego punktu aby ukryć kursor.

Właściwości zdarzeń wskaźnikowych

Zdarzenia wskaźnikowe mają właściwości, które pomogą Ci uczynić witrynę bardziej interaktywną i responsywną. Właściwości zdarzeń myszy to te same właściwości, które znajdziesz w zdarzeniach wskaźnika, plus kilka dodatkowych właściwości. W tym artykule wyjaśniono niektóre dodatkowe właściwości.

Właściwość pointerId

The wskaźnikId to właściwość zdarzenia wskaźnika, która pomaga zidentyfikować każdy unikalny sygnał wejściowy wskaźnika, taki jak rysik, palec lub mysz. Każde wejście wskaźnika otrzymuje unikalny identyfikator (automatycznie generowany przez przeglądarkę), który umożliwia śledzenie i wykonywanie na nich operacji.

Świetne zastosowanie dla wskaźnikId property to aplikacja do gier, w której użytkownicy jednocześnie korzystają z wielu palców lub rysików. The wskaźnikId Właściwość umożliwia śledzenie każdej powierzchni wskaźnika poprzez przypisanie każdemu z nich unikalnego identyfikatora. Podstawowy identyfikator zostaje przypisany do pierwszego wejścia wskaźnika.

Ta właściwość jest szczególnie przydatna w przypadku urządzeń dotykowych. Urządzenia korzystające ze wskaźników myszy mogą mieć jednocześnie tylko jedno wejście wskaźnika bez podłączonego do nich urządzenia zewnętrznego.

Oto prosty przykład, który wypisuje na konsoli identyfikator każdego wejścia wskaźnika:

const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});

Właściwość pointerType

Właściwość pointerType pomaga rozróżnić różne typy danych wejściowych wskaźników i umożliwia wykonywanie na ich podstawie operacji. Można rozróżnić mysz, pióro i dotyk palca. Ta właściwość może przyjmować tylko jeden z trzech ciągów wejściowych: „mysz”, „pióro” lub „dotyk”. Oto prosty przykład użycia metody Typ wskaźnika nieruchomość:

functionhandlePointerEvent(event){
// Using the pointerType property
switch (event.pointerType) {
case'mouse':
// Handle the situation where the pointing device is a mouse
console.log(`Mouse Pointer ID: ${event.pointerId}`);
break;
case'pen':
// Handle the situation where the pointing device is a stylus
console.log(`Stylus Pointer ID: ${event.pointerId}`);
break;
case'touch':
// Handle the situation where the pointing device is a finger touch
console.log(`Touch Pointer ID: ${event.pointerId}`);
break;
default:
// Handle other pointer types or cases
console.log(`pointerType ${event.pointerType} is not supported`);
break;
 }
}
// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

Właściwości szerokości i wysokości

Właściwości te reprezentują szerokość i wysokość obszaru styku wskaźnika w milimetrach. Niektóre przeglądarki ich nie obsługują i w takich przeglądarkach ich wartość będzie zawsze wynosić 1.

Dobrym przypadkiem użycia tych właściwości będą aplikacje wymagające precyzyjnych danych wejściowych lub konieczności rozróżnienia rozmiarów różnych danych wejściowych. Na przykład w aplikacji do rysowania większa wysokość i szerokość może oznaczać, że użytkownik rysuje szerszym pociągnięciem i odwrotnie.

W większości przypadków prawdopodobnie będziesz używać właściwości szerokości i wysokości dla zdarzeń dotykowych.

Użyj zdarzeń wskaźnikowych, aby uzyskać większą integrację

Zdarzenia wskaźnikowe umożliwiają obsługę szerokiej gamy urządzeń i typów danych wejściowych bez dużego stresu. Zawsze powinieneś używać ich w swoich aplikacjach, aby zachować zgodność z nowoczesnymi standardami i pomóc w budowaniu lepszej sieci.