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.

Donc, ce que j'ai dit avant "### ne provoquera pas le changement de la barre d'adresse" est faux.

Il n'y a pas de test à grande échelle sur d'autres navigateurs. Voici une estimation préliminaire : la signification de ### est qu'il contient le plus petit nombre de caractères et ne provoquera pas de saut vers l'en-tête de la page. dans tous les navigateurs.

Il n'y a rien de mal à écrire ceci, cela signifie que cette partie ressemble à un lien, la souris a besoin d'une forme de main et doit répondre aux clics, mais il n'y a pas d'action réelle. Utilisé pour remplacer href="#". Cette façon d’écrire n’est pas essentiellement du HTML mélangé à du js.

Utilisez void(0) avec prudence

Peu importe que vous utilisiez # ou void(0), il existe un inconvénient commun : le faire will Pour obtenir ce comportement, js doit être activé. Ne riez pas, même si la plupart des gens chargent js, nous ne pouvons pas exclure des accidents tels que des échecs de connexion, ou il y a vraiment quelques fous qui n'utilisent pas js. De plus, js ne peut pas être suivi par les moteurs de recherche, ce qui est un problème à prendre en compte.

En ce sens, # est encore pire, car la sémantique d'un seul # pointe en fait implicitement vers la page Web elle-même, ce qui créera de la confusion si vous utilisez "ouvrir dans un nouvel onglet" . Et ce problème void(0) ne le fait pas.

【Recommandations associées】

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!