responsywne kliknięcie react ach te internety

CASE STUDY: React – responsywne kliknięcie

Mam dla Ciebie szybki temat: responsywne kliknięcie w React. Ja wiem, co myślisz. Błahostka. Taki tam drobiazg. Banał. A więc… do dzieła!

<div onClick={this.myHandle}> ...

Myślisz, że wszystko jest ok. Jednak przychodzi ten pamiętny dzień, kiedy dostajesz buga od testera “Kliknięcie nie działa na iOS”. 

Przeciętny programista nie myśli teraz w kontekście “skąd się bierze problem”, tylko “jak go naprawić”. Przeciętny programista dumnie pisze:

<div
  onClick={this.myHandle}
  onTouchStart={this.myHandle}
> ... 

Działa? Działa. Ale dobry programista testuje swoje poprawki. Czy aby na pewno jego zmiana jest całkowicie nieszkodliwa dla aplikacji…? 

No i d**a. Dobry programista dosyć szybko zauważa, że metoda myHandle wywołuje się 2 razy na wszystkich znanych i lubianych mobilnych przeglądarkach. Problem pojawia się również na laptopach z dotykowych ekranem. I Bóg wie, gdzie jeszcze. Co tu się dzieje? Jednocześnie wywołuje się zarówno onClick, jak i onTouchStart! Nie o takie zachowanie nam chodzi.

Myślisz dalej. Wchodzisz do funkcji. Oblewa Cię delikatny zimny dreszcz, w powietrzu czujesz nadchodzącą rozpacz. W akcie desperacji piszesz: 

myHandle (evt) {
  evt.preventDefault()
  ...
}

...
<div onClick={(e) => this.myHandle(e)} onTouchStart={(e) => this.myHandle(e)}>...

Nope. To nie zadziała. A jak zadziała, to przez przypadek. Pogubiłeś się programisto. Wróć na początek.

<div onClick={this.myHandle}> ...

Pomęczyłam Ciebie, Programisto. Kazałam Ci myśleć. A to bez sensu. Czasem trzeba po prostu… wpisać problem w google. Ja tak zrobiłam i znalazłam rozwiązanie, na które sama bym nie wpadła. Otóż, umęczony poszukiwaniem rozwiązania Programisto – gdzie JS nie może, tam CSSa pośle. Dodaj do nieszczęsnego diva taki oto styl:

cursor: pointer;

Ufff. I po problemie! Responsywne kliknięcie okazało się niezłym wyzwaniem, jednak ogarnęliśmy temat. Szczegóły dla zainteresowanych dla githubie.

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę