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 zobaczmy, dlaczego jest to ważne.
Zdarzenia wejściowe DOM to abstrakcja zdarzeń wejściowych niskiego poziomu, 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 informacji o fizycznym urządzeniu odpowiedzialnym 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 danych?
Poza zdarzeniami związanymi z wskaźnikiem wielu deweloperów obecnie obsługuje logikę interakcji na warstwie dotykowej, aby uniknąć tworzenia „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 „click” 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 zapewnia deweloperom prostszy sposób udostępniania logiki w przeglądarkach obsługujących i nieobsługujących zdarzenia związane z wskaźnikiem.
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, dzięki czemu możesz jej używać na większości platform.
Obecnie ten interfejs API jest minimalny i skierowany na rozwiązanie 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.