a : actif plus animation clic solution invalide

Nous rencontrons souvent un problème, un clic:active plus animation n'est pas valide. Aujourd'hui, je vais vous montrer mon code et ma solution, et au passage, je vais partager avec vous. comment Méthode qui n'enregistre pas l'historique des sauts d'URL.

une balise : le clic actif plus animation n'est pas valide

Mon code css est le suivant :

.haorooms{  -webkit-animation: jpyd 1.5s cubic-bezier(0,.98,.44,1) both;  animation:  jpyd 1.5s cubic-bezier(0,.98,.44,1) both;}
.haorooms:active{ -webkit-animation: zoomOuts 1s ; animation: zoomOuts 1s; }

le code html est le suivant :

<a class="haorooms delay3 " href="/jingpin/"  ></a>

Sur les téléphones Apple, cliquer sur la balise a n'est pas valide. Après vérification, la balise a n'est pas bloquée. Quelle en est la raison ? Comment le résoudre ?

La raison en est que l'actif a une animation d'une seconde. Si vous appuyez et maintenez le bouton, il n'y a aucun moyen de sauter.

un tag : actif plus animation clic solution invalide

En fait, il existe de nombreuses solutions à ce problème, car nous le montrons sur le téléphone mobile, et l'effet attendu est de sauter après l'animation se termine. Nous pouvons ajouter l'événement ontouchend et accéder à une adresse après touchend.

ontouchend="window.location.href='/jingpin/'"

Après avoir ajouté ceci, vous pouvez accéder à l'adresse spécifiée, que vous la mainteniez enfoncée ou que vous cliquiez dessus. Après avoir appuyé sur la fin, vous pouvez accéder à l'adresse spécifiée.

L'historique des sauts de page ne sera pas enregistré au retour

Concernant le stockage de l'historique de navigation, je l'ai évoqué dans mon article précédent : quelques introductions aux applications web monopage SPA et page ajax non rafraîchissement commutation, historique Enregistrer Précédent Suivant Solution

Nous pouvons exploiter l'historique du navigateur via

history.replaceState 
history.pushState(state, title, url)

.

Cependant, dans des situations réelles, il existe également des situations dans lesquelles nous n'avons pas besoin d'enregistrer l'historique de navigation. Par exemple, "Il y a deux étiquettes de changement d'onglet dans une page. Le changement d'onglet modifie l'adresse du navigateur." le changement d'onglet est enregistré dans l'historique par défaut. Par conséquent, lorsque nous cliquons sur le bouton de retour, nous continuons de basculer entre deux onglets. Cependant, nous souhaitons en réalité revenir à la page précédente, et non basculer entre deux onglets. Alors comment résoudre cette situation ?

Nous y avons pensé

location.replace(newURL)

la méthode replace() ne générera pas de nouvel enregistrement dans l'historique objet. Lors de l'utilisation de cette méthode, la nouvelle URL écrasera l'enregistrement actuel dans l'objet Historique.

Nous pouvons donc écrire le code comme suit :

<ul id="haorooms">
  <li><a href="http://www.haorooms.com/archives">标签一</a></li>
  <li><a href="http://www.haorooms.com/tools/index">标签二</a></li>
</ul>
$(&#39;#haorooms li  a&#39;).on(&#39;click&#39;, function (event) { //tab中a标签点击
    event.preventDefault();
    location.replace(this.href);
})

Le code ci-dessus renvoie un code invalide sur certains téléphones mobiles, donc la solution échoue !

Méthodes history.replaceState() et location.replace()

La méthode ci-dessus a échoué, j'ai donc dû changer d'avis et j'ai vu que Maître Zhang Xinxu avait une solution de cas similaire à un moment donné. il y a. Alors j’en ai tiré des leçons !

La solution est la suivante :

$('#haorooms li  a').on('click', function (event) {
    event.preventDefault();
    history.replaceState(null, document.title, this.href.split('#')[0] + '#');
    location.replace('');
})

Remplacez d'abord l'adresse URL actuelle par l'adresse actuelle du lien se terminant par le signe dièse # via la méthode HTML5 history.replaceState() <🎜 ; >

Exécutez location.replace('') ​​​​pour actualiser l'adresse actuelle (# sera ignoré à ce moment-là

Avec cette solution, peu importe la façon dont nous changeons d'onglet, après avoir cliqué sur retour) ; nous reviendrons à la page précédente comme d'habitude. Plus besoin de basculer entre les onglets !

Parce que history.replaceState n'est pris en charge qu'à partir d'IE10, si vous souhaitez être compatible avec les navigateurs antérieurs, ou l'utiliser sur PC. J'ai vu que Zhang Dashen encapsulait également une fonction, donc je l'ai empruntée ici :

var fnUrlReplace = function (eleLink) {
    if (!eleLink) {
        return;
    }
    var href = eleLink.href;
    if (href && /^#|javasc/.test(href) === false) {
        if (history.replaceState) {
            history.replaceState(null, document.title, href.split('#')[0] + '#');
            location.replace('');
        } else {
             location.replace(href);
        }
    }
};

La fonction ci-dessus peut être appliquée comme suit

$('#haorooms li  a').on('click', function (event) {
  if (event && event.preventDefault) {
      event.preventDefault();
   }
   fnUrlReplace(this);
   return false;
})

Je crois que vous maîtrisez la méthode après lire ces cas, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment écrire un hack de condition en CSS

Page Web CSS désalignement Comment gérer

Comment utiliser CSS3 pour créer une animation de texte sous un éclairage lumineux

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!