Chrome 47 zawiera nową funkcję, która ułatwia zrozumienie, jak użytkownicy wchodzą w interakcje z Twoją witryną: InputDeviceCapabilities. Zróbmy krok w tył i sprawdźmy, dlaczego to jest ważne.
Zdarzenia wejścia DOM to abstrakcja zdarzeń wejścia na niskim poziomie, luźno powiązana z wejściem na urządzeniu fizycznym (np. click zdarzenia mogą być wywoływane przez mysz, ekran dotykowy lub klawiaturę. Jest jednak pewien problem: nie ma prostej metody na uzyskanie szczegółów dotyczących urządzenia fizycznego odpowiedzialnego za zdarzenie.
Ponadto z powodów związanych ze zgodnością niektóre typy danych wejściowych mogą generować dodatkowe „fałszywe” zdarzenia wejścia DOM. Jedno z takich fałszywych zdarzeń DOM występuje, gdy użytkownik klika ekran dotykowy (np. na telefonie komórkowym). Nie tylko uruchamia ono zdarzenia dotykowe, ale też (ze względu na zgodność) zdarzenia myszy.
Stwarza to problemy deweloperom, którzy chcą obsługiwać zarówno mysz, jak i dotykowe urządzenia wejściowe. Trudno jest stwierdzić, czy zdarzenie mousedown faktycznie reprezentuje nowe dane wejściowe z myszy, czy jest tylko zdarzeniem zgodności dla wcześniej przetworzonego zdarzenia touchstart.
Nowy interfejs API InputDeviceCapabilities udostępnia szczegółowe informacje o podstawowych źródłach zdarzeń wejściowych za pomocą obiektu sourceCapabilities w obiekcie UIEvent.
Obiekt ma właściwość firesTouchEvents, która jest ustawiona na true lub false w zależności od tego, jak działanie użytkownika wygenerowało zdarzenie.
Pytanie brzmi: gdzie należy używać tego typu treści?
Poza zdarzeniami wskaznika wielu deweloperów obecnie obsługuje logikę interakcji na poziomie dotykowym, aby uniknąć tworzenia domyślnych „fałszywych” zdarzeń myszy.Takie rozwiązanie sprawdza się w wielu scenariuszach i nie wymaga zmiany, aby korzystać z InputDeviceCapabilities.
W niektórych sytuacjach nie chcesz jednak preventDefault zdarzenia dotyku. Na przykład nadal chcesz, aby dotknięcia wysyłały zdarzenia „kliknięcia” i zmieniały fokus. W takich przypadkach informacje przechowywane w usłudze MouseEvent.sourceCapabilities.firesTouchEvents umożliwiają konsolidację logiki zdarzeń związanych z dotykiem i myszą w ramach modelu, który jest podobny do zarządzania logiką za pomocą zdarzeń związanych z wskaźnikiem. Oznacza to, że możesz mieć tylko jeden zestaw kodu, który zarządza logiką interakcji i daje deweloperom prostszy sposób na udostępnianie logiki w przeglądarkach obsługujących i nieobsługujących zdarzenia wskaźnika.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
Dobra wiadomość jest taka, że ta funkcja została wypełniona za pomocą Polyfill przez Ricka Byersa, więc możesz z niej korzystać na większości platform.
Obecnie ten interfejs API jest minimalny i skupia się na rozwiązaniu konkretnego problemu z identyfikacją zdarzeń myszy pochodzących ze zdarzeń dotykowych.
Można nawet utworzyć instancję klasy InputDeviceCapabilities, która zawiera tylko element firesTouchEvents. W przyszłości rozszerzymy tę funkcję, aby umożliwić Ci lepsze poznanie wszystkich urządzeń wejściowych w systemie użytkownika. Chętnie poznamy Twoją opinię na temat
przypadków użycia.