Traitement du clic natif du navigateur avant que le fichier dom: chargé

StackOverflow https://stackoverflow.com/questions/1223169

Question

J'ai un problème avec les événements natifs multi-navigateurs vs les événements CallBack.

J'ai un lien HTML " Cliquez sur moi " avec une donnée href="". Sur dom:loaded j'attache une fonction à ce lien (faire Ajax Stuff).

Le code JavaScript est chargé à la fin de la page pour suivre la recommandation YSlow.

Problème :

Si vous chargez cette page très rapidement (en appuyant sur F5), cliquez sur le lien puis sur

.
  • le alert() n'est pas appelé
  • le lien est suivi (rechargement de la page)

Cela se produit lorsque le serveur est à la traîne. En fait, le chargement de la page n'est pas terminé et le navigateur exécute le code.

Démo : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  </head>
  <body>

    <a href="#toolate" id="action">Click Me</a>

    <!-- According to YSlow Recommandation load at the bottom -->
    <script src="../js/lib/prototype.js" type="text/javascript" language="JavaScript"></script>
    <script>
      /* <![CDATA[ */
      document.observe('dom:loaded', function() { 
        $('action').observe('click', function(event){ alert("click"); Event.stop(event); });
      });
      /* ]]> */
    </script>
  </body>
</html>

Retourner :

Un retournement consiste à ajouter onClick="return false;": 

<a href="#toolate" id="action" onClick="return false;">Click Me</a>

Cela fonctionne pour les décalages, mais pas pour les clics rapides. Et je n'aime pas ce genre de retournement car mon objectif est de supprimer le onclick sur tous les <a href="">

.

Meilleures salutations

Était-ce utile?

La solution 2

Nous avons effectué de nombreux tests sur notre CMS avec de nombreux navigateurs.

Trié par vitesse:

  1. JavaScript ne peut pas s'exécuter avant un clic très rapide
  2. onclick = " renvoie false " fonctionne très bien dans la plupart des cas
  3. JavaScript en train de faire 2.) onLoad est trop lent mais pourrait être assez long
  4. L'utilisation de DIV comme bouclier soulève d'autres problèmes et n'est pas un bon choix

Autres conseils

Vous pouvez examiner ceci:

  

JQuery a une petite fonction pratique qui   lance votre javascript dès que   le modèle d'objet de document est prêt & # 8230;   ce qui se passe avant que la page a   chargement terminé. 

$(document).ready(function(){   //
 Your code here... 
});

via

Vous pouvez également placer un grand div handicapé devant tout pendant le chargement de la page pour interdire de cliquer, mais je ne le recommanderais pas.

Je ne sais pas si j'ai bien compris votre question. Faites-moi savoir si je ne l'ai pas fait

Il semble que vous ayez des choses bien en main et tout ce que vous cherchez à faire est de créer des liens qui ne rien dans les zones où une dégradation progressive n'est pas possible.

Dans ces cas, je suggère un lien au format suivant: 

<a href="javascript:void(0);">Linktext</a>

Ce lien ne devrait fonctionnellement absolument rien si javascript est activé ou désactivé.

Remarques importantes

  1. Le chiffre zéro dans le vide est absolument nécessaire. Internet Explorer se plaindra sinon.
  2. L'utilisation de " javascript: void (0); " est fortement découragée par Microsoft, car des choses étranges peuvent se produire. Pour éviter la majorité des bugs, n'enroulez rien d'autre que du texte dans vos liens void (0).
  3. Avant de prendre une décision, assurez-vous d’examiner attentivement l’ajout de " javascript: void (0); " est vraiment une meilleure solution que d’ajouter un onclick qui renvoie faux.

Suppression de l'attribut href:

La suppression de l'attribut href d'un lien est un XHTML valide. Bien qu’il soit valide en XHTML, votre lien perdra son style de lien automatique. Plus de soulignement, plus de couleurs, plus de survol et plus de changement de couleur automatique si le lien est visité.

Vous ne pouvez pas non plus remédier au manque de styles avec CSS en raison de la prise en charge inégale de: survolez dans Internet Explorer.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top