auxclick już wkrótce w Chrome 55

Jeff Posnick

Kiedy kliknięcie nie jest click? Dla programisty pracującego nad złożonym interfejsem użytkownika to nie jest abstrakcyjne pytanie filozoficzne. Jeśli wdrażasz niestandardowe zachowanie związane z wskaźnikiem myszy, musisz mieć na uwadze intencje użytkownika. Jeśli użytkownik kliknie link środkowym przyciskiem myszy, można założyć, że chce otworzyć nową kartę z treściami tego linku. Jeśli użytkownik kliknie środkowym przyciskiem myszy dowolny element interfejsu, możesz założyć, że zrobił to przez przypadek, i zignorować to działanie. Natomiast kliknięcie przycisku głównego powinno wywołać odpowiedź interfejsu.

Możesz modelować te subtelne interakcje za pomocą pojedynczego detektora zdarzeń click, choć jest to nieco kłopotliwe. Musisz wyraźnie sprawdzić właściwość buttonMouseEvent, aby sprawdzić, czy została ona ustawiona na 0, co oznacza przycisk główny, czy na dowolną inną wartość, przy czym 1 zwykle oznacza przycisk środkowy, itd. Niewielu deweloperów sprawdza wprost właściwość button, co powoduje, że kod obsługuje wszystkie wartości click w identyczny sposób, niezależnie od tego, który przycisk został naciśnięty.

Począwszy od Chrome 55 w odpowiedzi na kliknięcia niegłównym przyciskiem MouseEvent jest wywoływany nowy typ zdarzenia MouseEvent o nazwie auxclick. Wraz z tym nowym zdarzeniem nastąpiła również zmiana zachowania zdarzenia click: będzie ono wywoływane tylko po naciśnięciu głównego przycisku myszy. Mamy nadzieję, że te zmiany ułatwią deweloperom stron internetowych pisanie programów obsługi zdarzeń, które reagują tylko na te rodzaje kliknięć, które ich interesują, bez konieczności sprawdzania właściwości MouseEvent.button.

Zmniejsz liczbę wyników fałszywie pozytywnych

Jak już wspomnieliśmy, celem utworzenia auxclick było uniknięcie wdrażania niestandardowych obsługi auxclick, które błędnie zastępują zachowanie „kliknięcie środkowym przyciskiem myszy otwiera kartę”.click Wyobraź sobie na przykład, że masz napisany przetwarzacz zdarzeń click, który używa interfejsu History API do przeredagowania paska adresu i wdrażania niestandardowej nawigacji jednostronicowej. Może on wyglądać tak:

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

Twoja logika niestandardowa może działać zgodnie z oczekiwaniami, gdy jest wywoływana przez główny przycisk myszy, ale jeśli kod jest uruchamiany po kliknięciu środkowego przycisku, jest to fałszywie dodatni wynik. Wcześniejsze działanie uniemożliwiłoby domyślne otwieranie nowej karty, co jest niezgodne z oczekiwaniami użytkowników. Chociaż na początku metody obsługi błędów można wyraźnie sprawdzić, czy event.button === 0 jest spełniony, i wykonać kod tylko wtedy, gdy tak jest, łatwo o tym zapomnieć lub nie zdać sobie sprawy, że jest to konieczne.

Uruchom tylko kod, którego potrzebujesz

Minusem mniejszej liczby fałszywie pozytywnych wyników jest to, że funkcje zwrotne auxclick będą działać tylko wtedy, gdy użytkownik kliknie inny niż główny przycisk myszy. Jeśli Twój kod musi np. obliczyć odpowiedni adres URL docelowy przed otwarciem nowej karty, możesz nasłuchiwać zdarzenia auxclick i uwzględnić tę logikę w swojej metodzie wywołania zwrotnego. Nie będzie generować kosztów związanych z uruchomieniem po kliknięciu głównego przycisku myszy.

Obsługa i zgodność przeglądarki

Nowe zachowanie jest obecnie stosowane tylko w Chrome 55. Jak wspomniano w wstępnej propozycji, cenimy opinie (zarówno pozytywne, jak i negatywne) od społeczności web developerów. Przesłanie problemu w GitHub to najlepszy sposób na podzielenie się opinią z osobami, które pracują nad procesem standaryzacji.

Deweloperzy nie muszą czekać, aż auxclick będzie powszechnie dostępne, aby stosować sprawdzone metody obsługi zdarzeń myszy. Jeśli na początku metody obsługi zdarzenia click sprawdzisz wartość właściwości MouseEvent.button, możesz podjąć odpowiednie działania. Ten wzór będzie inaczej obsługiwał kliknięcia główne i pomocnicze niezależnie od tego, czy auxclick jest obsługiwany natywnie:

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);