: touch pseudo-klasa CSS czy coś podobnego?


86

Próbuję zrobić przycisk, który po kliknięciu przez użytkownika zmienia swój styl, podczas gdy przycisk myszy jest wciśnięty. Chcę też, żeby zmienił swój styl w podobny sposób, jeśli zostanie dotknięty w przeglądarce mobilnej. Pozornie oczywistą rzeczą było dla mnie użycie CSS: aktywna pseudoklasa, ale to nie zadziałało. Próbowałem: skupić się i to też nie działało. Spróbowałem: unosić się i wydawało się, że działa, ale zachował styl po zdjęciu palca z przycisku. Wszystkie te obserwacje dotyczyły iPhone'a 4 i Droida 2.

Czy istnieje sposób na odtworzenie tego efektu w przeglądarkach mobilnych (iPhone, iPad, Android i miejmy nadzieję, że inne)? Na razie robię coś takiego:

<style type="text/css">
    #testButton {
        background: #dddddd;
    }
    #testButton:active, #testButton.active {
        background: #aaaaaa;
    }
</style>

...

<button type="button" id="testButton">test</button>

...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });
</script>

Pseudo-klasa: active jest przeznaczona dla przeglądarek na komputerze, a klasa active dla przeglądarek dotykowych.

Zastanawiam się, czy istnieje prostszy sposób na zrobienie tego bez angażowania JavaScript.


2
Prawie każda przeglądarka dotykowa obsługuje takie rzeczy jak hoveri mousedown/ mouseupinaczej, trudno jest je wszystkie uwzględnić.
Czad

Android i iOS mają: touchstart,: touchmove,: touchend i: touchcancel pseudoklasy, których możesz użyć.
Paul Hanbury

2
Próbowałem ustawić style dla pseudoklas: touchstart i: touchend i nie działały one na iPhonie ani na Droidzie. @Paul Hanbury, czy na pewno nie mylisz pseudoklasy CSS ze zdarzeniami JavaScript?
Elias Zamaria

1
@ mikez302 - Myślę, że masz rację. plugins.jquery.com/plugin-tags/touchstart
Doug Chamberlain

2
Czułbym się głupio, przesyłając to jako odpowiedź, ale w rzeczywistości odpowiedź brzmi: „Nie, to niemożliwe, musisz użyć Javascript”. To, o co prosisz, nie jest częścią CSS2 ani CSS3. Myślę, że fakt, że: active nie działa, jest problemem agenta użytkownika, który można potencjalnie zgłosić jako błąd w przeglądarkach iOS i Android, ale tylko po to, aby rozwiązać problem użytkownika końcowego ... tak, musisz użyć JS . Możesz opakować swój kod zgodności w sprawdzenie, czy obsługuje ontouchstart .
joelhardi

Odpowiedzi:


49

Nie ma czegoś takiego jak :touchw specyfikacji W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active powinno działać, myślę.

Kolejność w klasie :active/ :hoverpseudo jest ważna, aby działała poprawnie.

Oto cytat z powyższego linku

Interaktywne programy użytkownika czasami zmieniają renderowanie w odpowiedzi na działania użytkownika. CSS udostępnia trzy pseudoklasy dla typowych przypadków:

  • Pseudoklasa: hover ma zastosowanie, gdy użytkownik wyznacza element (za pomocą jakiegoś urządzenia wskazującego), ale go nie aktywuje. Na przykład wizualny agent użytkownika może zastosować tę pseudoklasę, gdy kursor (wskaźnik myszy) znajdzie się nad polem wygenerowanym przez element. Programy klienckie, które nie obsługują multimediów interaktywnych, nie muszą obsługiwać tej pseudoklasy. Niektóre zgodne programy użytkownika obsługujące media interaktywne mogą nie być w stanie obsługiwać tej pseudoklasy (np. Urządzenie typu pióro).
  • Pseudoklasa: active obowiązuje, gdy element jest aktywowany przez użytkownika. Na przykład między momentami, w których użytkownik naciska przycisk myszy i zwalnia go.
  • Pseudoklasa: focus obowiązuje, gdy element ma fokus (akceptuje zdarzenia z klawiatury lub inne formy wprowadzania tekstu).

9
Wiedziałem, że nie ma czegoś takiego jak: dotyk. Zastanawiałem się, czy jest coś podobnego. : aktywny wydawał się rozsądny, ale nie zadziałał w moich testach.
Elias Zamaria

@ mikez302 - Pomyślałem, że wiesz, że chcę zacytować swoje źródło. Zgadzam się z tobą, nie widzę żadnego powodu, dla którego to by nie zadziałało, poza moim punktem, że kolejność jest bardzo ważna. Widziałem, że ktoś opublikował coś o pseudoselektorach css dla IOS i Androida, ale nie mogłem rozmawiać z tymi technologiami.
Doug Chamberlain

Zamieniłem reguły: active i: hover w moim przykładzie i wydaje się, że nic nie robi.
Elias Zamaria

36
@ mikez302: użyj :activepseudoklasy. To powinno działać, ale w niektórych przeglądarkach trzeba małą siekać, aby to działało: dołączyć obsługi zdarzeń dla touchstartzdarzenia w organizmie (np <body ontouchstart="">)
gion_13

5
Wystarczy dotknąć komentarza @ mikez302 w ostatniej odpowiedzi, jest to zgrabna poprawka w HTML5 Mobile Boilerplate, która prowadzi do tego artykułu - alxgbsn.co.uk/2011/10/17/ ...
Giles Butler

20

Ponieważ telefon komórkowy nie przekazuje informacji zwrotnych po najechaniu myszą, jako użytkownik chcę otrzymywać natychmiastowe informacje zwrotne po kliknięciu łącza. Zauważyłem, że -webkit-tap-highlight-colornajszybciej reaguje (subiektywne).

Dodaj następujące elementy do swojego ciała, a Twoje linki będą miały efekt dotknięcia.

body {
    -webkit-tap-highlight-color: #ccc;
}

Wydaje się, że jest to najbardziej niezawodne, ale nie wygląda najlepiej. Kolor tła wydaje się nieco rozciągać poza element, sprawiając, że przez chwilę wydaje się większy.
Adam

@Adam tak, nie mogłem tego obejść, o ile pamiętam, ale to, że to tylko ułamek sekundy, nie było dla mnie zbyt wielkim problemem, zwłaszcza, że ​​pozwoliłoby to użytkownikowi uzyskać informację zwrotną, że kliknął (czyli co jest dla nich ważne w tym ułamku czasu)
Abdo

Właściwie otrzymałem: active pseudo style działające w końcu po prostu wiążąc funkcję ze zdarzeniem document.ontouchstart (przez jQuery), z pustym wywołaniem zwrotnym.
Adam

Niezły pomysł :-) W tym celu w ogóle unikałem JavaScript.
Abdo

2
Po prostu udostępnianie -webkit-tap-highlight-colorjest niestandardową funkcją CSS , której używam :activezamiast tego, naprawdę pasuje i ma sens.
Ricardo Fornes

0

Miałem problem ze stylizacją przycisków na ekranie dotykowym telefonu komórkowego. To rozwiąże problemy z najechaniem drążkiem / aktywnym przyciskiem.

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.