La pseudo-classe :active ne fonctionne pas dans safari mobile

Question

Dans Webkit sur iPhone/iPad/iPod, le fait de spécifier le style d'une pseudo-classe :active pour un fichier de type <a> ne se déclenche pas lorsque vous tapez sur l'élément. Comment faire pour qu'elle se déclenche ? Exemple de code :

<style> 
a:active { 
    background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>

Answer 1

//hover for ios
-webkit-tap-highlight-color: #ccc;

Ceci fonctionne pour moi, ajoutez à votre CSS sur l'élément que vous voulez mettre en évidence

Answer 2

Utilisez-vous toutes les pseudo-classes ou seulement celle-là ? Si vous en utilisez au moins deux, assurez-vous qu'elles sont dans le bon ordre, sinon elles se briseront toutes :

a:link
a:visited
a:hover
a:active

dans cet ordre. De même, si vous utilisez simplement :active, ajoutez un:link, même si vous ne lui donnez pas de style.

Answer 3

Pour ceux qui ne veulent pas utiliser le ontouchstart, vous pouvez utiliser ce code

<script>
 document.addEventListener("touchstart", function(){}, true);
</script>

Answer 4

J'ai publié un outil qui devrait résoudre ce problème pour vous.

À première vue, le problème semble simple, mais en réalité, le comportement des touches et des clics doit être personnalisé de manière assez poussée, y compris les fonctions de temporisation et des choses comme "ce qui se passe lorsque vous faites défiler une liste de liens" ou "ce qui se passe lorsque vous appuyez sur un lien et que vous déplacez la souris/le doigt hors de la zone active".

Cela devrait résoudre le problème d'un seul coup : https://www.npmjs.com/package/active-touch

Vous devrez soit faire affecter vos styles :active à la classe .active, soit choisir votre propre nom de classe. Par défaut, le script fonctionne avec tous les éléments de lien, mais vous pouvez le remplacer par votre propre tableau de sélecteurs.

Les commentaires et les contributions honnêtes et utiles sont très appréciés.

Answer 5

J'ai essayé cette réponse et ses variantes, mais aucune ne semble fonctionner de manière fiable (et je n'aime pas me fier à la "magie" pour ce genre de choses). J'ai donc fait ce qui suit à la place, qui fonctionne parfaitement sur toutes les plateformes, pas seulement Apple :

1. Renommer les déclarations css qui utilisaient :active a .active .

2. Dresser une liste de tous les éléments concernés et ajouter pointerdown/mousedown/touchstart pour appliquer le .active et pointerup/mouseup/touchend pour le supprimer. Utilisation de jQuery :

   let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown";
   let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave";
   
   let clickableThings = '<comma separated list of selectors>';
   $(clickableThings).on(controlActivationEvents,function (e) {
       $(this).addClass('active');
   }).on(controlDeactivationEvents, function (e) {
       $(this).removeClass('active');
   });

C'était un peu fastidieux, mais maintenant j'ai une solution qui est moins vulnérable aux ruptures entre les versions d'Apple OS. (Et qui a besoin que quelque chose comme ça se casse ?)