auxclick już wkrótce w Chrome 55

Jan Posnick

Kiedy kliknięcie nie jest click? Nie jest to abstrakcyjne pytanie filozoficzne dla programisty stron internetowych, który pracuje nad złożonym interfejsem użytkownika. Jeśli stosujesz niestandardowe działanie myszy, musisz pamiętać o zamiarach użytkownika. Jeśli na przykład użytkownik kliknie link środkowym przyciskiem myszy, można założyć, że chciałby otworzyć nową kartę z zawartością tego linku. Jeśli użytkownik klika w środku losowy element interfejsu, można założyć, że było to niezamierzone i zignorować to działanie, podczas gdy kliknięcie przycisku głównego będzie wywoływać odpowiedź z interfejsu.

Te szczegółowe interakcje można modelować za pomocą jednego detektora zdarzeń click, nawet jeśli jest to dość kłopotliwe. Musisz samodzielnie sprawdzić właściwość button elementu MouseEvent, aby zobaczyć, czy jest ustawiona na 0 – reprezentuje przycisk główny, czy inny element, gdzie 1 zwykle reprezentuje środkowy przycisk itd. Jednak wielu deweloperów nie przechodzi aż tak daleko od sprawdzania właściwości button, ponieważ dochodzi do tego, że kod obsługuje wszystkie elementy click jednakowo, niezależnie od tego, który przycisk został naciśnięty.

Od Chrome 55 w odpowiedzi na kliknięcia przycisku innego niż główny jest uruchamiany nowy typ elementu MouseEvent o nazwie auxclick. To nowemu zdarzeniu towarzyszy też zmiana jego zachowania: click jest wywoływane wyłącznie po naciśnięciu głównego przycisku myszy. Mamy nadzieję, że te zmiany ułatwią programistom tworzenie modułów obsługi zdarzeń, które reagują tylko na te typy kliknięć, które są dla nich istotne, bez konieczności sprawdzania właściwości MouseEvent.button.

Zmniejsz liczbę wyników fałszywie pozytywnych

Jak już wspomnieliśmy, jednym z powodów tworzenia auxclick jest unikanie wdrażania niestandardowych modułów obsługi click, które przez pomyłkę zastępują zachowanie „środkowe kliknięcie-otwarcia-karty”. Załóżmy np., że masz utworzony moduł obsługi zdarzeń click, który korzysta z interfejsu History API, aby przepisywać pasek lokalizacji i implementować niestandardowe elementy nawigacyjne pojedynczej strony. Może to wyglądać mniej więcej tak:

document.querySelector('#my-link').addEventListener('click', event => {
    event.preventDefault();
    // ...call history.pushState(), use client-side rendering, etc....
});

Twoja niestandardowa logika może działać zgodnie z oczekiwaniami po aktywowaniu jej przez przycisk główny myszy, ale jeśli ten kod jest uruchamiany po kliknięciu środkowego przycisku, jest to w praktyce wynik fałszywie pozytywny. Przed wprowadzeniem tego nowego działania domyślne działanie polegające na otwarciu nowej karty było sprzeczne z oczekiwaniami użytkowników. Chociaż na początku procedury obsługi możesz wyraźnie sprawdzić, czy występuje event.button === 0, kod jest uruchamiany tylko wtedy, gdy jest to konieczne, łatwo zapomnieć lub nigdy nie zdajesz sobie sprawy, że jest to konieczne.

Uruchamiaj tylko potrzebny kod

Z kolei wywołania zwrotne auxclick są wykonywane tylko wtedy, gdy faktycznie zostanie kliknięty inny niż główny przycisk myszy. Jeśli masz kod, który musi np. obliczyć odpowiedni docelowy adres URL przed otwarciem nowej karty, możesz nasłuchiwać polecenia auxclick i uwzględnić tę logikę w wywołaniu zwrotnym. Nie spowoduje to ponoszenia kosztów uruchomienia po kliknięciu głównego przycisku myszy.

Obsługa i zgodność z przeglądarkami

To nowe zachowanie jest obecnie zaimplementowane tylko w Chrome 55. Jak wspomnieliśmy we wstępnej ofercie, doceniamy opinie (zarówno pozytywne, jak i negatywne) ze społeczności programistów stron internetowych. Zgłoszenie problemu z GitHubem to najlepszy sposób na przekazanie tej opinii osobom, które pracują nad procesem standaryzacji.

W międzyczasie deweloperzy nie muszą czekać, aż auxclick stanie się powszechnie dostępny, aby móc zastosować sprawdzone metody obsługi zdarzeń myszy. Jeśli sprawdzisz wartość właściwości MouseEvent.button na początku modułu obsługi zdarzeń click, możesz podjąć odpowiednie działania. Ten wzorzec będzie obsługiwać kliknięcia główne i dodatkowe w różny sposób, niezależnie od tego, czy auxclick ma natywną obsługę kliknięć:

function handlePrimaryClick(event) {
    // ...code to handle the primary button click...
}

function handleAuxClick(event) {
    // ...code to handle the auxiliary button click….
}

document.querySelector('#my-link').addEventListener('click', event => {
    if (event.button === 0) {
    return handlePrimaryClick(event);
    }


    // This provides fallback behavior in browsers without auxclick.
    return handleAuxClick(event);
});

// Explicitly listen for auxclick in browsers that support it.
document.querySelector('#my-link').addEventListener('auxclick', handleAuxClick);