Detaillierte Erklärung des Unterschieds zwischen einem href=# und einem href=javascript:void(0)
|
a href="#"> Nach dem Klicken auf den Link wird die Seite nach oben gescrollt. # Der Standardankerpunkt ist #TOP <a href="javascript:void(0)" onClick="window.open()"> Nach dem Anklicken des Links bewegt sich die Seite nicht, es wird lediglich der Link geöffnet <a href="#" onclick="javascript:return false;"> Gleicher Effekt wie oben, bei verschiedenen Browsern kann es Unterschiede geben. Wenn Sie nicht möchten, dass die Seite nach dem Anklicken eines Links nach oben scrollt, verwenden Sie href="javascript:void(0)" statt href="#". return false hat einen ähnlichen Effekt. Detaillierte Erklärung des Unterschieds zwischen href="#" und href="javascript:void(0)" "#" enthält eine Standortinformation. Der Standardanker ist #top, also der obere Rand der Webseite. JavaScript:void(0) zeigt nur einen toten Link an. Deshalb ist die Seite manchmal sehr lang und der Browser-Link ist eindeutig #, springt aber an den oberen Rand der Seite. JavaScript:void(0) ist nicht so. Daher ist es am besten, void(0) beim Aufrufen von Skripten zu verwenden. oder <input onclick> <div onclick> usw. Mehrere Möglichkeiten zum Öffnen von Links in neuen Fenstern 1.Fenster.öffnen('URL') 2. Benutzerdefinierte Funktionen verwenden Code kopieren Der Code lautet wie folgt:<Skript> Funktion openWin(Tag, Objekt) { obj.target="_blank"; obj.href = "Web/Umspannwerk/Umspannwerk.aspx?stationno="+tag; obj.klick(); } </Skript> <a href="javascript:void(0)" onclick="openWin(3,this)">LINK_TEST</a> window.location.href="" ------------------------------------------------------------------------------------------- Wenn es ein # ist, springt es nach oben. Hier sind einige Lösungen, die ich gesammelt habe: 1: <a href="####"></a> 2: <a href="javascript:void(0)"></a> 3: <a href="javascript:void(null)"></a> 4: <a href="#" onclick="return false"></a> 5: <span style="cursor:hand"></span> (scheint in FF nicht angezeigt zu werden) ------------------------------------------------------------------------------------------- Verwenden Sie JavaScript mit Vorsicht: void(0) Als ich heute CGI debuggte, wurde das CGI-Programm eindeutig ausgeführt und das Endergebnis war korrekt, aber die Seite wurde einfach nicht aktualisiert. Beim Test unter FireFox2.0 ist das Ergebnis normal, aber IE6 wird einfach nicht aktualisiert! Nach sorgfältiger Untersuchung habe ich festgestellt, dass der CGI-Seitenlink <a href="javaScript:void(0)" OnClick="XXX_Func();" ….> nur ein Beispiel </a> ist und das Problem in diesem void(0) liegt! Schauen wir uns zunächst die Bedeutung von void(0) in JavaScript an: In JavaScript ist void ein Operator, der angibt, dass ein Ausdruck ausgewertet werden soll, aber kein Wert zurückgegeben wird. Das Verwendungsformat des Void-Operators ist wie folgt: 1. javascript:void (Ausdruck_r_r) 2. javascript:void expression_r_r expression_r_r ist ein auszuwertender JavaScript-Standardausdruck. Die Klammern um den Ausdruck sind optional, es empfiehlt sich jedoch, sie einzuschließen. Wir können Hyperlinks mit dem Void-Operator angeben. Der Ausdruck wird ausgewertet, aber es wird nichts in das aktuelle Dokument geladen. Der folgende Code erstellt einen Hyperlink, der nichts tut, wenn der Benutzer darauf klickt. Wenn der Benutzer auf den Link klickt, wird void(0) als 0 ausgewertet, hat aber keine Auswirkung auf das JavaScript. <a href="javascript:void(0)">Hier klicken bewirkt nichts</a> Das heißt, wenn Sie einige Verarbeitungen durchführen möchten, aber nicht die gesamte Seite aktualisieren möchten, können Sie void(0) verwenden. Wenn Sie die Seite jedoch aktualisieren müssen, müssen Sie vorsichtig sein. Tatsächlich können wir <a href="javascript:void(document.form.submit())"> so verwenden, dieser Satz führt eine Übermittlungsoperation aus. In welchen Situationen wird void(0) also häufiger verwendet? Kein Refresh? Natürlich ist es Ajax. Wenn Sie sich Ajax-Webseiten ansehen, werden Sie im Allgemeinen viel void(0) sehen :), also sollten Sie vor der Verwendung von void(0) am besten darüber nachdenken, ob die Seite als Ganzes aktualisiert werden muss. Wenn wir JavaScript verwenden, benutzen wir normalerweise etwas wie: <a href="#" onclick="javascript:method">Senden</a> Die Methode ruft die JavaScript-Methode über einen Pseudolink auf. Ein Problem mit dieser Methode ist: Obwohl die Seite beim Klicken auf den Link nicht springt, wird die Bildlaufleiste nach oben scrollen. Die Lösung besteht darin, ein „False“ zurückzugeben. Wie unten dargestellt: <a href="#" onclick="javascript:method;return false;">Senden</a> Sie können auch ### verwenden. a href="javascript:void(0)" onclick="javascript:method;return false;"Senden javascript:void(0) springt nicht hoch :) Eine andere Methode ist #diese ein href="#this" onclick="javascript:method" |
>>: So erstellen Sie mit Photoshop ein Web-Drahtgittermodell
Artikel empfehlen
Natives JS zum Erzielen eines funkelnden Sterneneffekts
In diesem Artikelbeispiel wird der spezifische Co...
Prinzip und Anwendung der MySQL-Master-Slave-Synchronisation
Inhaltsverzeichnis 1. Master-Slave-Synchronisatio...
Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd
Inhaltsverzeichnis 1. React kombiniert mit Antd, ...
So implementieren Sie den Vue-Timer
In diesem Artikelbeispiel wird der spezifische Co...
Lassen Sie uns über Parameter in MySQL sprechen
Vorwort: In einigen früheren Artikeln haben wir h...
Detailliertes Tutorial zum Kompilieren und Installieren von MySQL 8.0.20 aus dem Quellcode
Im vorherigen Artikel haben wir Folgendes vorgest...
Verwendung der MySQL-Zeitdifferenzfunktionen TIMESTAMPDIFF und DATEDIFF
Verwendung der Zeitdifferenzfunktionen TIMESTAMPD...
So verwenden Sie den regulären Matching-Selektor für CSS-Attributwerte (Tipps)
Es gibt drei Typen von regulären Matching-Selekto...
Problemaufzeichnung bei der Verwendung des Vue+Echarts-Diagramms
Vorwort echarts ist mein am häufigsten verwendete...
Beispiel für das Schreiben von mobilem H5 zum Aufrufen einer APP (IOS, Android)
iOS 1. URL-Schema Diese Lösung ist grundsätzlich ...
Idee in einem War-Paket verpackt, auf Tomcat bereitgestellt und Probleme mit dem Zugriffspfad (Abbildung und Text)
Der wichtigste Schritt bei der Verpacken einer Id...
Drei Möglichkeiten zum Kopieren von MySQL-Tabellen (Zusammenfassung)
Tabellenstruktur und deren Daten kopieren Die fol...
MySQL 5.7.17 Installations- und Konfigurations-Tutorial für Mac
1. MySQL herunterladen Klicken Sie auf die Downlo...
Sprungcode für HTML-Seite
Speichern Sie den folgenden Code als Standard-Home...
Die einfachste Formularimplementierung des Flexbox-Layouts
Flexibles Layout (Flexbox) erfreut sich zunehmend...