CSS: hover /: focus vs click event na (mobilnym) urządzeniu dotykowym

Question

Często znajduję się w sytuacjach, w których muszę wyświetlać menu po najechaniu kursorem, a w przypadku urządzeń mobilnych menu powinno otwierać się po kliknięciu. Teraz np. rozważyć następujący przykład:

.btn { 
 
    width: 200px; 
 
    background-color: #333; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
.menu { 
 
    display: none; 
 
    padding: 15px; 
 
} 
 
.btn:hover .menu { 
 
    display: block; 
 
} 
 
.btn:focus .menu { 
 
    display: block; 
 
}

<div class="btn"> 
 
    Button 
 
    <div class="menu">I am menu</div> 
 
</div>

Teraz to automatycznie działa na urządzeniach mobilnych, ponieważ stan aktywowanych jest lepki na urządzeniach dotykowych. Ale czy ten hack ma zastosowanie do wszystkich urządzeń dotykowych? Czy to jest warte ryzyka? Czy jest jakieś urządzenie dotykowe, które nie ma stanu "najeżka"? Oczywiście alternatywą jest przypisywanie zdarzeń dotykowych/kliknięć za pomocą JavaScript na urządzeniach dotykowych, ale wydaje się to zbędne, ponieważ nie widziałem żadnego urządzenia dotykowego, które nie ma lepkich stanów unoszących się w powietrzu.

Więc moje pytanie brzmi:

Czy mogę używać hack stanu aktywowanych lub należy użyć zdarzenia JavaScript, aby uczynić go bardziej kuloodporne?

Answer 1

Powiedziałbym, że po prostu trzymaj się css dla większości zawieszek, o ile nie masz nic przeciwko menu lub zamknięciu, gdy użytkownik kliknie osobny element.

Nie jestem świadomy jakichkolwiek przeglądarek mobilnych, które nie przestrzegają tego zachowania, a przynajmniej nie poważniejszych. Jeśli któraś z głównych przeglądarek upuści to, ogromna część sieci mobilnej będzie wymagać przebudowy.

Prawdopodobnie bezpieczne!

Answer 2

Z mojego doświadczenia wynika, że ​​nie jest to hackowanie, ale raczej sposób na naśladowanie zdarzeń z czystym CSS. Używam głównie :hover/:focus dla tego rodzaju problemów, ponieważ

1.) Są niezawodne.

2.) Tanie (pod względem kb).

Wymaga tylko 2 reguł i nie ma zewnętrznego żądania HTTP, aby zawrzeć regułę dla w pełni funkcjonującego menu, ale kilka linii JavaScript (lub horror, jQuery), aby stworzyć to samo.

co powiedziałem w komentarzach, należy lub może egzekwować atrybut tabindex zmusić element będzie aktywowana, takie jak:

<div class="non-focusable-clickable-hover-element" tabindex="-1">I cannot be focussed<div> 

<div class="focusable-hover-element" tabindex="1">I can be focussed<div>