Chrome w wersji 47 ma nową funkcję, która ułatwia zrozumienie interakcji użytkowników z witryną: InputDeviceCapabilities. Cofnijmy się trochę i dowiedzmy się, dlaczego to takie ważne.
Zdarzenia wejściowe DOM to abstrakcja powyżej niskopoziomowych zdarzeń wejściowych, luźno powiązana
z wejściem urządzenia fizycznego (np. Zdarzenia click
mogą być uruchamiane za pomocą myszy, ekranu dotykowego lub klawiatury. Jednak nie ma prostej metody, by uzyskać szczegółowe informacje o urządzeniu fizycznym odpowiedzialnym za zdarzenie.
Dodatkowo ze względu na zgodność pewne typy danych wejściowych mogą generować dalsze „fałszywe” zdarzenia wejściowe DOM. Jednym z fałszywych zdarzeń DOM jest kliknięcie przez użytkownika ekranu dotykowego (np. telefonu komórkowego). Nie tylko wywołuje zdarzenia dotknięcia, ale także – ze względu na zgodność – zdarzenia myszy.
Sprawia to, że programiści obsługują wprowadzanie danych zarówno w postaci myszy, jak i dotyku. Trudno stwierdzić, czy zdarzenie mousedown
faktycznie reprezentuje nowe dane wejściowe za pomocą myszy, czy jest tylko zdarzeniem zgodności z przetworzonym wcześniej zdarzeniem uruchamiania dotykiem.
Nowy interfejs API InputDeviceCapabilities
udostępnia szczegółowe informacje o podstawowych źródłach zdarzeń wejściowych za pomocą obiektu sourceCapabilities
w interfejsie UIEvent.
Obiekt ma właściwość firesTouchEvents
ustawioną na true
lub false
w zależności od tego, jak zdarzenie zostało wygenerowane przez działanie użytkownika.
Pytanie brzmi: Gdzie należy go używać?
Poza zdarzeniami typu wskaźnik wielu programistów obsługuje obecnie logikę interakcji w warstwie dotykowej, co pozwala uniknąć tworzenia „fałszywych” zdarzeń myszy.Ta konstrukcja sprawdza się w wielu sytuacjach i nie wymaga wprowadzania zmian, aby korzystać z możliwości InputDeviceCapabilities.
W niektórych przypadkach jednak nie chcesz zapobiegać dotknięciu domyślnego
zdarzenia dotknięcia. Nadal chcesz np. wysyłać zdarzenia kliknięcia i zmieniać fokus. W takich przypadkach informacje przechowywane we właściwości MouseEvent.sourceCapabilities.firesTouchEvents
umożliwiają rozpoczęcie konsolidowania logiki zdarzeń opartych na dotknięciu i myszy w model podobny do zarządzania logiką w przypadku zdarzeń wskaźnika. Oznacza to, że można mieć tylko jeden zestaw kodu, który zarządza logiką interakcji i udostępnia programistom prostszy sposób współdzielenia logiki między przeglądarkami, które obsługują i nie obsługują zdarzeń 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 został on Polyfilled przez Ricka Byersa, więc możesz go używać na większości platform.
Obecnie interfejs API jest ograniczony do minimum i koncentruje się na rozwiązywaniu określonego problemu z identyfikacją zdarzeń myszy pochodzących ze zdarzeń dotknięcia.
Możesz nawet utworzyć wystąpienie elementu InputDeviceCapabilities
, ale zawiera on tylko firesTouchEvents
. W przyszłości planujemy rozszerzyć ten obszar, aby umożliwić Ci zrozumienie wszystkich urządzeń wejściowych w systemie użytkownika. Chętnie poznamy Twoją opinię na temat
przypadków użycia.