Verwenden Sie javascript:void(0) mit Vorsicht. Warum ist es nicht gut, so zu schreiben?

Beheben Sie einen Fehler in der Anweisung. Bei IE6 tritt der GIF-Pause-Bug nach dem Klicken nur bei „Javascript: Pseudoprotokoll ohne Semikolon“ auf

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

Warum ist es nicht gut, so zu schreiben?

Lassen Sie mich eine andere Perspektive bieten.

Das Hinzufügen des href-Attributs zum 3499910bf9dac5ae3c52d5ede7383485-Tag bedeutet Folgendes:

:linkDer Selektor kann es auswählen

Dies kann ein Tag sein Fokus erhalten (kann durch Drücken der Tabulatortaste aufgerufen werden)

Im Standard-Stylesheet des Browsers hat nur das 3499910bf9dac5ae3c52d5ede7383485-Tag mit dem href-Attribut die Wirkung von „cursor:pointer“ (insbesondere in niedrigeren Versionen). IE).

ist an das 3499910bf9dac5ae3c52d5ede7383485-Tag des onclick-Ereignisses gebunden, insbesondere wenn es sich bei seiner Funktion um eine Ajax-Anfrage handelt. Im Grunde benötigen wir dieses Tag nicht Das Standardverhalten und die tatsächliche Seite, die nicht verbunden werden kann, erhalten im Allgemeinen den Cursor und andere Stile dieses Elements in CSS. Zu diesem Zeitpunkt muss das href-Attribut hinzugefügt werden zu:

Lassen Sie 3499910bf9dac5ae3c52d5ede7383485 auf Tastaturereignisse reagieren und den Fokus gewinnen (damit Screenreader den Inhalt dahinter lesen und die Barrierefreiheit verbessern können)

Elegante Verschlechterung. Wenn die Netzwerkverbindung schlecht ist und das CSS nicht geladen wurde, hat 3499910bf9dac5ae3c52d5ede7383485 immer noch die Handform und den normalen Linkstil.

Die Lösungen dafür, dem 3499910bf9dac5ae3c52d5ede7383485-Tag das href-Attribut zu geben und es nicht mit der eigentlichen Seite zu verbinden, sind:

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

Ihre Erfahrungen sind etwas anders.

1. Nachdem Sie auf diesen Link geklickt haben, springt die Seite zum Kopf und # wird am Ende von window.location.href hinzugefügt (wenn am Ende von window.location.href kein # steht). ), es sei denn, das Onclick-Ereignis wird im js-Standardereignis erfasst und blockiert.

2 hat eine vorläufige Semantik. Befindet sich jedoch auf der Seite ein Element mit der ID nogo, funktioniert nach dem Klicken auf den Link der

Anker-Mechanismus und die Seite wird am oberen Rand des Elements ausgerichtet. Weitere Einzelheiten finden Sie in Zhang . Siehe Test unten.

5~8 haben die gleiche Funktion, verwenden aber das JavaScript-Pseudoprotokoll. Unter IE6 pausiert IE6 nach dem Klicken auf die Optionen 6 und 8 ohne Semikolons das GIF auf der Seite und löst das Ereignis onbeforeunload aus (Einzelheiten finden Sie hier). IE6 erkennt, dass diese Seite eine Umleitung hat, und bricht diese ab. siehe hier). Wenn Sie also die Quelle eines a1f02c36ba31691bcfe87b2722de723b ersetzen, wird IE6 die neue Anfrage überhaupt nicht abschließen.

Ich bevorzuge Option 4.

Was die semantische Verwendung von LZ wie 0408054196e655f677973fb4d7c99865 betrifft, gibt es hier bereits genügend detaillierte Antworten. Ich möchte hinzufügen, dass in dieser Situation weiterhin barrierefreie Anwendungen unterstützt werden können. Informationen zu den Methoden finden Sie unter „WAI-ARIA Accessible Web Application Properties“.

Update, ich habe den folgenden Test durchgeführt:

Wenn Sie in IE11 auf ###, #### und ##### klicken, springt die Seite nicht mehr zu „Gehe zu“. der Kopf

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

Wenn Sie in Chrome auf ##, ###, #### und ##### klicken, springt die Seite nicht mehr zum Kopf.

Aber in IE11 und Chrome führt das Klicken auf alle 3499910bf9dac5ae3c52d5ede7383485 dazu, dass die Adressleiste geändert wird und das Hashchange-Ereignis ausgelöst wird.

Was ich also zuvor gesagt habe: „### führt nicht dazu, dass sich die Adressleiste ändert“, ist falsch.

Andere Browser haben wir nicht in großem Umfang getestet. Hier eine vorläufige Vermutung: Die Bedeutung von ### besteht darin, dass es die geringste Anzahl an Zeichen hat und keinen Sprung zum Seitenanfang verursacht in allen Browsern.

Es ist nichts Falsches daran, dies zu schreiben. Es bedeutet, dass dieser Teil wie ein Link aussieht, die Maus eine Handform benötigt und auf Klicks reagieren muss, aber es gibt keine tatsächliche Aktion. Wird verwendet, um href="#" zu ersetzen. Diese Schreibweise ist nicht unbedingt HTML gemischt mit js.

Verwenden Sie void(0) mit Vorsicht

Unabhängig davon, ob Sie # oder void(0) verwenden, gibt es einen gemeinsamen Nachteil: Sie tun dies Um dieses Verhalten zu erreichen, muss js aktiviert sein. Lachen Sie nicht, obwohl die meisten Leute js laden, können wir Unfälle wie Verbindungsfehler nicht ausschließen, oder es gibt wirklich ein paar verrückte Leute, die js nicht verwenden. Darüber hinaus können JS nicht von Suchmaschinen verfolgt werden, was ein Problem ist, das berücksichtigt werden muss.

In diesem Sinne ist # noch schlimmer, da die Semantik eines einzelnen # tatsächlich implizit auf die Webseite selbst verweist, was zu Verwirrung führt, wenn Sie „in neuem Tab öffnen“ verwenden. Und dieses Problem gilt nicht für void(0).

【Verwandte Empfehlungen】

1.

Besondere Empfehlung

: Version „php Programmer Toolbox“ V0.1 herunterladen2. Lösung für die ungültige Methode von javascript:void(0) in ie6

3.

Javascript-Definition und Ausführliche Erklärung des Operators void(0)

4. Zusammenfassung der Unterschiede zwischen href=javascript:void(0) und href=#

Das obige ist der detaillierte Inhalt vonVerwenden Sie javascript:void(0) mit Vorsicht. Warum ist es nicht gut, so zu schreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!