Utilisez javascript:void(0) avec prudence, pourquoi n'est-il pas bon d'écrire de cette façon ?

Correction d'un bug dans la déclaration. Pour IE6, le bug de pause GIF après clic ne se produit que dans le cas de "javascript : pseudo protocole sans point-virgule"

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

Pourquoi n'est-il pas bon d'écrire comme ça ?

Permettez-moi de vous proposer une autre perspective.

L'ajout de l'attribut href à la balise signifie ce qui suit :

:linkLe sélecteur peut le sélectionner

Ceci a Tags peut get focus (accessible en appuyant sur le bouton de tabulation)

Dans la feuille de style par défaut du navigateur, seule la balise avec l'attribut href a l'effet de curseur:pointeur (surtout dans les versions inférieures) sur IE).

est lié à la balise de l'événement onclick , surtout lorsque sa fonction est une requête ajax, en gros nous n'avons pas besoin de cette balise. le comportement par défaut et la page réelle qui ne peut pas être connectée recevront généralement le curseur et les autres styles de cet élément en CSS. À ce stade, l'attribut href doit être ajouté à :

Laissez répondre aux événements du clavier et obtenir le focus (afin que les lecteurs d'écran puissent lire le contenu derrière et améliorer l'accessibilité)

Dégradation élégante. Lorsque la connexion réseau est mauvaise et que le CSS n'a pas été chargé, a toujours la forme de la main et le style de lien normal.

Les solutions pour donner à la balise l'attribut href et ne pas la connecter à la page réelle sont :

1.
2.
3.
4.
5.
6.<a href="javascript:void(0)">
7.
8.

Leurs expériences sont légèrement différentes.

1. Après avoir cliqué sur ce lien, la page passera au début et # sera ajouté à la fin de window.location.href (s'il n'y a pas de # à la fin de window.location.href ), sauf si l'événement onclick est capturé et bloqué dans l'événement js Default.

2 a une sémantique préliminaire. Cependant, s'il y a un élément avec l'ID nogo dans la page, après avoir cliqué sur le lien, le mécanisme ancre fonctionnera et la page sera alignée avec le bord supérieur de l'élément. Pour plus de détails, consultez "Mécanisme, application et problèmes de technologie de positionnement HTML d'ancre d'URL" de Zhang Xinxu

3 ne saute plus à l'en-tête de page par défaut dans Chrome, 4 ne saute plus à l'en-tête de page dans IE11 En-tête de page . Voir test ci-dessous.

5~8 ont la même fonction, mais utilisent le pseudo-protocole JavaScript. Sous IE6, après avoir cliqué sur les options 6 et 8 sans points-virgules, IE6 mettra en pause le gif dans la page et déclenchera l'événement onbeforeunload (voir ici pour plus de détails). IE6 reconnaîtra que cette page a une redirection et l'abandonnera. voir ici). Ainsi, si vous remplacez le src d'un après cela, IE6 ne terminera pas du tout la nouvelle requête.

Je préfère l'option 4.

Quant à l'utilisation sémantique de LZ comme <a href="javascript:void(0)">, il y a déjà suffisamment de réponses détaillées ici. Je voudrais ajouter que cette situation peut toujours prendre en charge les applications sans obstacle. Pour les méthodes, veuillez vous référer aux « Propriétés de l'application Web accessible WAI-ARIA ».

Mise à jour, j'ai fait le test suivant :

 <p>
            <a href="#">#</a>
        </p>
        <p>
            <a href="##">##</a>
        </p>
        <p>
            <a href="###">###</a>
        </p>
        <p>
            <a href="####">####</a>
        </p>
        <p>
            <a href="#####">#####</a>
        </p>
        <script type="text/javascript">
            var n = 0 ;            window.onhashchange = function(){
                alert(++n) ;
            }        </script>

Dans IE11, en cliquant sur ###, #### et #####, la page ne saute plus Aller à la tête

Dans chrome, lorsque l'on clique sur ##, ###, #### et #####, la page ne saute plus à la tête.

Mais dans IE11 et Chrome, cliquer sur tous les entraînera la modification de la barre d'adresse et déclenchera l'événement hashchange.

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Solution à la méthode invalide de javascript:void(0) dans ie6

3. Définition Javascript et explication détaillée de l'opérateur void(0)

4. Résumé des différences entre href=javascript:void(0) et href=#

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!