Auslösen der Pseudo-Klasse ": active" auf einem Touchscreen - html, google-chrome, touch, touchscreen

Ich entwickle derzeit eine JavaScript-Anwendung, die auf einem Touchscreen-Kiosk bereitgestellt wird, auf dem Chrome im Kiosk-Modus ausgeführt wird.

Mir ist aufgefallen, dass ich mit einer Maus auf das Symbol klickeSchaltflächen auf der Benutzeroberfläche werden die von der Pseudoklasse ": active" angewendeten Stile angezeigt, wenn die Maustaste gedrückt wird. Mein Problem ist, dass die gleiche Taste, die durch Berühren des Bildschirms ausgelöst wird, nicht den aktiven Zustand auslöst.

Gibt es eine Möglichkeit, ein Berührungsereignis wie einen Mausklick zu verhalten?

Antworten:

Unter der Annahme, dass die aktive CSS-Pseudoklasse nicht funktioniert, müssen Sie wahrscheinlich DOM-Ereignisse verwenden.

Funktionieren die Ereignisse "MouseDown" und "MouseUp" mit Touchscreens? Angenommen, Sie könnten Folgendes ausprobieren:

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

Ersetzen Sie dann in Ihrem CSS: active durch [data-active] wie folgt:

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

Ich glaube nicht, dass dies genauso funktionieren wird. Möglicherweise müssen Sie einige Tricks ausführen, damit untergeordnete Elemente ordnungsgemäß funktionieren.