Traitement du clic natif du navigateur avant dom: chargé

J'ai un problème avec les événements natifs de Cross-Browser par rapport aux événements CallBack. J'ai un lien HTML "Click Me" avec href="" donné Sur dom:loaded j'attache une fonction à ce lien (faire Ajax Stuff).Traitement du clic natif du navigateur avant dom: chargé

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

Problème:

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

le alert() n'est pas appelé
le lien est suivi (rechargeant la page

Cela se produit lorsque le serveur est en retard. En fait la page n'a pas fini de charger et le navigateur exécute le code.

Demo:

<!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>

Turn Around:

Un tour est autour d'ajouter onClick="return false;":

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

Il fonctionne pour les LAG mais pas pour un clic rapide. Et je n'aime pas ce genre de tour autour parce que mon but est d'enlever la onclick sur tous <a href="">

Cordialement

Source

2009-08-03 Jean-Philippe Encausse

Pouvez-vous simplement désactiver le contrôle puis activez i t lorsque le chargement du document est terminé? En d'autres termes, si vous pouvez gérer le clic avant le chargement de la page, n'autorisez pas les clics avant le chargement de la page. –

D'accord mais comment dit-on au navigateur: "ne pas suivre ahref jusqu'à ce que le chargement du document se termine"? Vous pouvez utiliser JavaScript mais engin n'a pas encore démarré. –

J'ai ajouté une démo: http://files.getdropbox.com/u/255810/Jalios/Demo/Shield/shield.html –

Nous avons fait beaucoup de nombreux tests sur notre CMS sur de nombreux navigateurs.

Trié par vitesse:

JavaScript ne peut pas exécuter avant un clic vraiment rapide
onclick = "return false" fonctionne très bien dans la plupart des cas
JavaScript 2. faire) onLoad est trop lent mais pourrait être enought
DIV utilisant comme bouclier apporte d'autres questions et n'est pas un bon choix

Source

2012-08-03 19:44:57

Vous pouvez regarder dans ceci:

JQuery a une petite fonction à portée de main que lance votre javascript dès que le Document Object Model est prêt ... qui se passe avant que la page ne possède terminé le chargement.

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

via

Vous pouvez aussi mettre un grand div handicapés devant tout pendant le chargement d'interdire en cliquant, mais je ne le recommanderais pas.

Je ne sais pas si je suis bien compris votre question, permettez-moi de savoir si je ne l'ai pas

Source

2009-08-03 16:10:00 marcgg

Ma fonction pourrait devoir fonctionner avec le DOM qui devrait être prêt. Dans l'exemple, si un onClick sur le ne sera pas appelé si l'utilisateur clique rapidement. Javascript Le moteur n'est pas prêt je pense Nous avons essayé la grande technique du bouclier DIV, mais c'est un peu maladroit;) Je pensais que ce serait un problème courant mais peut-être qu'il n'y a pas de solution "propre". –

-1

Il semble que vous avez des choses assez bien dans la main, et tout ce que vous cherchez à faire est de créer des liens qui font rien dans les zones où la dégradation gracieuse n'est pas possible.

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

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

Ce lien doit fonctionnellement absolument rien avec javascript activé ou désactivé.

Remarques importantes

Le numéro zéro dans le vide est absolument nécessaire. Internet Explorer se plaindra autrement.
L'utilisation de "javascript: void (0);" est fortement découragé par Microsoft parce que des choses étranges peuvent arriver. Pour éviter la majorité des bugs, n'enveloppez rien d'autre que du texte dans vos liens void (0).
Avant de prendre une décision, assurez-vous de bien considérer si vous ajoutez "javascript: void (0);" est vraiment une meilleure solution que d'ajouter un onclick qui renvoie false.

En supprimant l'attribut href:

Retrait de l'attribut href d'un lien est valide XHTML. En dépit d'être XHTML valide, votre lien perdra son style automatique de lien. Plus de soulignement, plus de couleurs, plus de survol, plus de changement automatique de couleur si le lien est visité.

Vous ne pouvez pas résoudre le manque de styles avec CSS en raison de la prise en charge inégale de: hover dans Internet Explorer.

Source

2009-08-05 14:35:10 coderjoe

Merci pour votre réponse. Il est bon de savoir que javascript: void (0); devrait être mieux que "retourner faux". Mais je cherchais quelque chose de plus global. Puis-je supprimer le href comme vous l'avez dit dans le commentaire? est-ce XHTML valide? –

Oui, vous pouvez supprimer l'attribut href et il est valide html. Cependant, votre lien cesse d'être un lien et vous perdez certaines fonctionnalités à cause de cela. J'ai mis à jour ma réponse avec des détails. – coderjoe

Traitement du clic natif du navigateur avant dom: chargé

Répondre

Questions connexes