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

Kluczowe wnioski

Aby zapewnić integrację i dostępność dla szerszej bazy użytkowników, aplikacje internetowe powinny być projektowane z różnymi opcjami wprowadzania danych poza tradycyjnymi myszami. Takie podejście pozwala na większe dostosowanie do indywidualnych potrzeb i preferencji, jednocześnie wspierając uniwersalną użyteczność.

Wykorzystanie zdarzeń wskaźnika w JavaScript umożliwia wydajną obsługę zarówno interakcji opartych na myszy, jak i na dotyku, eliminując w ten sposób wymóg oddzielnych procesów implementacji dla każdego odpowiedniego typu zdarzenia.

Konstrukcja zdarzeń wskaźnika w nowoczesnych programach internetowych ściśle odzwierciedla tradycyjną konstrukcję zdarzeń myszy, ułatwiając adaptację wcześniej istniejącego kodu źródłowego do obsługi zarówno ekranu dotykowego, jak i wprowadzania danych za pomocą rysika.

Powszechność technologii ekranów dotykowych doprowadziła do zwiększenia zależności od danych wejściowych opartych na palcach w interakcjach cyfrowych. W związku z tym kluczowe znaczenie dla nowoczesnych praktyk tworzenia stron internetowych ma dostosowanie i ułatwienie różnych form interakcji użytkownika za pośrednictwem różnych urządzeń wejściowych poza tradycyjnymi interfejsami opartymi na myszach.

Wykorzystanie nowszego standardu znanego jako Pointer Events w JavaScript pozwala na płynną integrację zarówno danych wejściowych opartych na myszy, jak i dotyku, eliminując w ten sposób potrzebę oddzielnych procesów wdrażania.

Czym są zdarzenia wskaźnika?

Zdarzenia wskaźnika stanowią uniwersalny paradygmat zarządzania zróżnicowanymi modalnościami wejściowymi w kontekście przeglądania stron internetowych, obejmujący tradycyjne interfejsy oparte na kursorze wraz ze współczesnymi alternatywami, takimi jak interakcje oparte na ekranie dotykowym i rysiku. To spójne podejście zapewnia płynną interakcję z treściami internetowymi niezależnie od zastosowanej platformy sprzętowej.

Zasadniczo zdarzenia wskaźnika ułatwiają zarządzanie zbiorem interakcji użytkownika, niezależnie od ich pochodzenia.

Rodzaje zdarzeń wskaźnika

Zdarzenia wskaźnika są podobne w nazwie do zdarzeń myszy, które mogą być już znane. Każdemu zdarzeniu myszy w JavaScript odpowiada odpowiednie zdarzenie wskaźnika, umożliwiające konwersję z “myszy” na “wskaźnik” w celu obsługi urządzeń dotykowych i piórkowych.

Przedstawiony wykres ilustruje porównanie różnych zdarzeń wskaźnika z odpowiadającymi im zdarzeniami myszy:

Zdarzenia wskaźnika

|

Zdarzenia myszy

-|-

pointerdown

|

mousedown

pointerup

|

mouseup

pointermove

|

mousemove

pointerleave

|

mouseleave

pointerover

|

mouseover

pointerenter

|

mouesenter

pointerout

|

mouseout

pointercancel

|

none

gotpointercapture

|

brak

lostpointercapture

|

brak

Jest oczywiste, że istnieje trio dodatkowych zdarzeń wskaźnika, które nie mają skorelowanych zdarzeń myszy. Zrozumienie takich zdarzeń zostanie opisane w odpowiednim czasie.

Korzystanie ze zdarzeń wskaźnika w JavaScript

Możesz wykorzystywać zdarzenia wskaźnika w sposób analogiczny do zdarzeń myszy, a typowy przepływ pracy do przetwarzania takich zdarzeń zasadniczo jest zgodny z następującą strukturą:

Wykorzystanie mechanizmu zapytań DOM do pobrania określonego elementu HTML z modelu obiektu dokumentu poprzez określenie jego unikalnego identyfikatora lub atrybutów w kodzie HTML, umożliwiając wydajną manipulację i interakcję z wybranym elementem w JavaScript lub innych językach programowania.

Wykorzystując metodę addEventListener , można wyznaczyć interesujące zdarzenie i powiązać je z funkcją, która zostanie wykonana po jego wystąpieniu.

Wykorzystanie atrybutów i funkcji obiektu zdarzenia przekazanego jako parametr do funkcji zwrotnej, która reprezentuje zdarzenie wywołujące reakcję lub odpowiedź w kodzie.

Oto przykład wykorzystujący zdarzenie 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
function handlePointerMove(ev) {
    // Handle the event however you want to
    target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

Dostarczony kod ustanawia wyznaczony obiekt w DOM, wraz ze skryptową funkcjonalnością w JavaScript, która reaguje na zdarzenie “pointermove”.Wykorzystując funkcję JavaScript, kod ten dodaje detektor zdarzeń do określonego elementu docelowego, który łączy zarówno akcję opartą na wskaźniku, jak i powiązaną funkcję.

Ten fragment kodu umożliwia wizualizację pozycji docelowego elementu na stronie internetowej za pomocą ruchu wskaźnika po nim za pomocą kursora, palca lub pióra. Dany element jest identyfikowany za pomocą unikalnego identyfikatora “docelowego”.

W podobny sposób można wykorzystać różne zdarzenia wskaźnika do zamierzonego celu.

Zdarzenie pointercancel

Zdarzenie PointerCancel jest aktywowane, gdy inne zdarzenie wskaźnika zakłóca i kończy jego bieżące wykonywanie przed zamierzonym zakończeniem. Zazwyczaj przeglądarka anuluje każde poprzedzające zdarzenie wskaźnika, które mogło mieć miejsce w momencie przerwania. Różne czynniki mogą prowadzić do aktywacji tego zdarzenia, w tym między innymi:

Podczas aktywnego manipulowania urządzeniem elektronicznym za pomocą interakcji dotykowych, takich jak przeciąganie elementu po wyświetlaczu, użytkownicy mogą napotkać przerwy w przepływie pracy z powodu połączeń przychodzących lub powiadomień, które wymagają natychmiastowej uwagi.

⭐ Gdy zmienia się orientacja urządzenia.

⭐Gdy okno przeglądarki traci fokus.

Gdy użytkownik zdecyduje się odejść od bieżącego interfejsu lub wejść w interakcję z innym programem, sygnalizując odejście od obecnego centrum uwagi i wskazując zmianę priorytetu.

Zdarzenie pointercancel oferuje wszechstronne rozwiązanie do rozwiązywania różnych scenariuszy w sposób dostosowany do konkretnych wymagań. Poniżej przedstawiono przykładowy 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 umożliwia wyznaczonemu elementowi HTML przechwytywanie i reagowanie na wszystkie skierowane do niego interakcje oparte na wskaźniku, niezależnie od tego, czy zachodzą one w jego granicach, czy poza nimi.

Metoda setPointerCapture() umożliwia przechwytywanie wskaźników powiązanych z określonym elementem, podczas gdy metoda releasePointerCapture() zwalnia wszelkie przechwycone wskaźniki powiązane z tym konkretnym elementem.

Zdarzenia przechwytywania wskaźników, zarówno uzyskane, jak i utracone, mogą być skutecznie wykorzystywane do przechwytywania wskaźników w różnych scenariuszach.

Zdarzenie gotpointercapture

Zdarzenie gotpointercapture jest uruchamiane, gdy element przechwytuje dane wejściowe wskaźnika. Zdarzenie to może być wykorzystane do ustalenia stanu obsługi zdarzeń wskaźnika na elemencie HTML.Na przykład w programie do rysowania zdarzenie gotpointercapture można wykorzystać do ustawienia pozycji początkowej kursora.

Zdarzenie lostpointercapture

Zdarzenie Lost Pointer Capture jest aktywowane za każdym razem, gdy element traci kontrolę nad wskaźnikiem myszy. Zdarzenie to zapewnia możliwość zwolnienia lub wyeliminowania wcześniej ustalonego stanu, który został zainicjowany, gdy element uzyskał przechwytywanie wskaźnika. W aplikacji graficznej, takiej jak program do rysowania, zdarzenie utraty przechwycenia wskaźnika może być wykorzystane do ukrycia obecności kursora, zwiększając wrażenia użytkownika poprzez płynną interaktywność i wizualne zanurzenie.

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

Zdarzenia wskaźnika posiadają pewne atrybuty, które przyczyniają się do zwiększonej interaktywności i szybkości reakcji na stronach internetowych. Atrybuty te odzwierciedlają te, które można znaleźć w zdarzeniach myszy, a jednocześnie zawierają dodatkowe cechy. W tym artykule omówiono wybrane z tych dodatkowych funkcji.

Właściwość pointerId

pointerId to charakterystyczny identyfikator przypisany do każdego indywidualnego wejścia opartego na wskaźniku, w tym tych wykonanych rysikiem, palcem lub myszą. Ten automatycznie generowany identyfikator, dostarczany przez przeglądarkę, umożliwia śledzenie wielu wejść i ułatwia wykonywanie różnych działań związanych z każdym odpowiednim wejściem.

W scenariuszu gier wielodotykowych właściwość PointerId służy jako skuteczny sposób rozróżniania poszczególnych dotknięć palcem lub rysikiem. Przypisując unikalny identyfikator do każdej powierzchni wskaźnika, system może dokładnie rozróżniać i przetwarzać różne dotknięcia z wielu źródeł, przy czym początkowe wejście jest oznaczone jako główny identyfikator.

Ta właściwość wykazuje znaczną użyteczność, gdy jest wykorzystywana z urządzeniami dotykowymi, ponieważ takie urządzenia są w stanie pomieścić wiele wejść palców jednocześnie bez konieczności stosowania dodatkowego sprzętu peryferyjnego. W przeciwieństwie do tego, urządzenia zorientowane na kursor, które opierają się głównie na użyciu wskaźnika myszy, mają ograniczoną zdolność do jednoczesnego odbierania więcej niż jednego wejścia wskaźnika, co wymaga włączenia dodatkowego sprzętu, aby umożliwić tę funkcjonalność.

Oczywiście, oto elegancko sformułowana wersja fragmentu kodu, o którym mowa:csharpvoid printPointerIds(int* ptr1, int* ptr2) {std::cout " “ID wskaźnika 1: " " *ptr1 " std::endl;std::cout " “ID wskaźnika 2: " " *ptr2 " std::endl;}// Usage:int main() { int arr[5] = {0, 1, 2, 3, 4};auto ptr1 = arr; // Deklaruje i inicjalizuje wskaźnik ‘ptr1’ adresem pierwszego elementu tablicy ‘arr’.auto ptr2 = &arr[1]; // Deklaracja i inicjalizacja 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

“mysz”, “pióro” lub “dotyk”. Prostą ilustrację wykorzystania właściwości pointerType można znaleźć poniżej:

 function handlePointerEvent(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);

Szerokość i wysokość Właściwości

Wymiary obszaru kontaktu wskaźnika są wyrażone w milimetrach za pomocą tych atrybutów. Niestety, niektóre przeglądarki internetowe nie rozpoznają tych właściwości, co skutkuje stałą wartością 1 dla tych konkretnych przeglądarek.

Odpowiednie zastosowanie dla wyżej wymienionych atrybutów można znaleźć w programach wymagających dokładnych danych wejściowych lub wymagających rozróżnienia między danymi wejściowymi o różnych rozmiarach. Dla przykładu, rozważmy program do rysowania, w którym większe wymiary odpowiadają szerszemu pociągnięciu pędzla, i odwrotnie, mniejsze wymiary oznaczają węższy gest.

Zazwyczaj podczas pracy ze zdarzeniami dotykowymi w tworzeniu stron internetowych, powszechną praktyką jest wykorzystywanie właściwości szerokości i wysokości.

Wykorzystanie zdarzeń wskaźnika dla większej integracji

Wykorzystanie zdarzeń wskaźnika może znacznie uprościć proces dostosowywania różnych urządzeń i modalności wprowadzania danych, eliminując potrzebę nadmiernego wysiłku z Twojej strony. Zgodność z aktualnymi standardami poprzez włączenie tych zdarzeń do aplikacji jest wysoce zalecana, ponieważ przyczynia się do poprawy wrażeń internetowych.