Maison >interface Web >tutoriel CSS >Pourquoi la pseudo-classe :active ne fonctionne-t-elle pas sur les éléments de Mobile Safari et comment puis-je y remédier ?

Pourquoi la pseudo-classe :active ne fonctionne-t-elle pas sur les éléments de Mobile Safari et comment puis-je y remédier ?

Susan Sarandonoriginal: 2024-11-30 02:54:14840parcourir

Why Doesn't :active Pseudo-Class Work on Mobile Safari's <a> Éléments et comment puis-je y remédier ? Éléments et comment puis-je y remédier ? " />

:Inactivité de la pseudo-classe active dans Mobile Safari

Problème :

Dans les navigateurs iOS, la spécification de styles pour le pseudo- :active La classe pour les éléments ne parvient pas à s'activer lorsque l'élément est enfoncé. Le problème se produit dans les navigateurs basés sur WebKit sur les iPhones, iPads et. iPods.

Exemple de code :

<style>
  a:active {
    background-color: red;
  }
</style>

<!-- snip -->
<a href="#">Click me</a>

Solution :

Pour résoudre ce problème dans Mobile Safari, appliquez le écouteur d'événement ontouchstart pour l'élément :

<body ontouchstart="">
  ...
</body>

Cet écouteur d'événement global améliore la réactivité de tous les boutons de la page.

Solution alternative :

Une approche alternative consiste à utiliser la bibliothèque JavaScript Fastclick :

<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<script>
  FastClick.attach(document.body);
</script>

Fastclick accélère les événements de clic sur les appareils tactiles et résout le problème de pseudo-classe :active.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript safari webkit for class Event this ios issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment supprimer efficacement des classes avec un préfixe spécifique en JavaScript ?Article suivant：Comment supprimer efficacement des classes avec un préfixe spécifique en JavaScript ?

Articles Liés

Voir plus