Wywoływanie pseudoklasy ": active" na ekranie dotykowym - html, google-chrome, touch, touchscreen

Obecnie pracuję nad aplikacją JavaScript, która zostanie wdrożona na kiosku z ekranem dotykowym z Chrome w trybie kiosku.

Zauważyłem, że gdy klikam myszką, używam myszyprzyciski na interfejsie, style stosowane przez pseudo-klasę „: active” są widoczne, gdy mysz jest opuszczona. Mój problem polega na tym, że ten sam przycisk wyzwalany przez dotknięcie ekranu nie uruchamia stanu aktywnego.

Czy istnieje sposób, aby wydarzenie dotykowe zachowywało się tak samo, jak kliknięcie myszą?

Odpowiedzi:

Zakładając, że CSS: aktywna pseudoklasa nie działa, prawdopodobnie będziesz musiał użyć zdarzeń DOM.

Czy zdarzenia „mousedown” i „mouseup” działają z ekranami dotykowymi? Zakładając, że tak, możesz spróbować czegoś takiego:

addEventListener("mousedown", function (event) {
if (event.target.setAttribute) {
event.target.setAttribute("data-active", "");
}
}, true);

addEventListener("mouseup", function (event) {
if (event.target.removeAttribute) {
event.target.removeAttribute("data-active");
}
}, true);

Następnie w swoim CSS zamień: aktywny z [data-active], tak:

div[data-active] {
/* blah blah */
}

Nie sądzę, żeby to działało tak samo ... możesz potrzebować trochę sztuczek, aby na przykład elementy potomne działały poprawnie.