Wie können wir Sticky-Hover-Effekte auf Tasten für Touch-Geräte verhindern?

Verhindern von Sticky-Hover-Effekten auf Touch-Geräten für Tasten

Beim Erstellen von Benutzeroberflächen sowohl für Desktop- als auch für Touch-fähige Geräte ist es wichtig, sich mit diesem Problem zu befassen das Problem der Sticky-Hover-Effekte auf Schaltflächen. Auf Touch-Geräten kann der Hover-Status, der normalerweise durch eine Änderung der Hintergrundfarbe des Elements angezeigt wird, hängen bleiben, selbst nachdem die Taste losgelassen wurde.

Lösungen zur Verhinderung von Sticky-Hover-Effekten

Es wurden mehrere Lösungen vorgeschlagen, um dieses Problem zu beheben:

• Entfernen des Schwebeflugs Klasse: Obwohl diese Methode einfach ist, kann sie ineffizient sein und funktioniert möglicherweise nicht gut auf Geräten, die sowohl Touch- als auch Mauseingaben unterstützen.
• Hinzufügen einer Touch-Klasse: Diese Technik auch weist Einschränkungen auf, da Geräte mit gemischten Eingabemethoden nicht berücksichtigt werden.

Der Bevorzugte Lösung

Die ideale Lösung wäre, den Hover-Status am Touchend zu entfernen. Dies scheint jedoch mit herkömmlichen Methoden wie dem Fokussieren eines anderen Elements oder dem Auslösen manuellen Tippens in JavaScript nicht erreichbar.

Medienabfragen Level 4-Lösung

Allerdings mit der weit verbreiteten Implementierung von CSS Für Medienabfragen der Stufe 4 seit 2018 gibt es eine elegantere Lösung:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

Diese CSS-Regel besagt, dass, wenn die Da der Browser echtes Hovering unterstützt (was normalerweise die Verwendung eines mausähnlichen primären Eingabegeräts anzeigt), werden die Hover-Stile auf Schaltflächen angewendet. Dies verhindert effektiv Hover-Effekte auf Touch-fähigen Geräten.

Polyfill für ältere Browser

Für Browser, die CSS Media Queries Level 4 nicht unterstützen, kann ein Polyfill verwendet werden wird verwendet, um eine ähnliche Lösung zu implementieren:

html.my-true-hover button:hover {
    background-color: blue;
}

JavaScript-Code aus dem Polyfill kann dann den My-True-Hover umschalten Klasse basierend auf Hovering-Unterstützung:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

Durch die Verwendung dieser Lösung können Entwickler sicherstellen, dass Schaltflächen auf Desktop-Browsern über entsprechende Hover-Effekte verfügen und gleichzeitig Sticky-Hover-Effekte auf Touch-fähigen Geräten verhindern.

Das obige ist der detaillierte Inhalt vonWie können wir Sticky-Hover-Effekte auf Tasten für Touch-Geräte verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!