Ich möchte eine einfache JavaScript-Funktion mit einem Klick ohne Umleitung ausführen.
Gibt es einen Unterschied oder Vorteil zwischen dem Einfügen des JavaScript-Aufrufs in das href
Attribut (wie folgt:
<a href="javascript:my_function();window.print();">....</a>
) vs. in das onclick
Attribut einfügen (an das onclick
Ereignis binden )?
javascript
href
SkunkSpinner
quelle
quelle
Antworten:
Das Setzen des Onclicks innerhalb der href würde diejenigen beleidigen, die stark an die Trennung von Inhalten von Verhalten / Handeln glauben. Das Argument ist, dass sich Ihr HTML-Inhalt ausschließlich auf den Inhalt konzentrieren sollte, nicht auf die Präsentation oder das Verhalten.
Heutzutage besteht der typische Pfad darin, eine Javascript-Bibliothek (z. B. jquery) zu verwenden und mithilfe dieser Bibliothek einen Ereignishandler zu erstellen. Es würde ungefähr so aussehen:
quelle
href
Einfügenonclick
? Angenommen, Sie würden es aus irgendeinem Grund inline stellen, welchen sollten Sie verwenden? (In der Praxis würde ich tun, was Sie vorgeschlagen haben, aber Sie scheinen den Unterschied zwischen den beiden Attributen übersprungen zu haben.)Schlecht:
gut:
besser:
noch besser 1:
noch besser 2:
Warum besser? weil
return false
verhindert, dass der Browser dem Link folgtBeste:
Verwenden Sie jQuery oder ein ähnliches Framework, um den onclick-Handler anhand der ID des Elements anzuhängen.
quelle
href
nicht#
auf einen tatsächlichen Link für die noJS-Browser eingestellt wäre.In Bezug auf Javascript besteht ein Unterschied darin, dass das
this
Schlüsselwort imonclick
Handler auf das DOM-Element verweist, dessenonclick
Attribut es ist (in diesem Fall das<a>
Element), während sichthis
dashref
Attribut auf daswindow
Objekt bezieht .Wenn in Bezug auf die Darstellung ein
href
Attribut in einem Link fehlt (dh<a onclick="[...]">
), zeigen Browser standardmäßig dentext
Cursor (und nicht den häufig gewünschtenpointer
Cursor) an, da er den<a>
als Anker und nicht als Link behandelt.In Bezug auf das Verhalten unterstützt
href
der Browser beim Festlegen einer Aktion durch Navigation über normalerweise das Öffnen dieser Aktionhref
in einem separaten Fenster über eine Verknüpfung oder ein Kontextmenü. Dies ist nicht möglich, wenn eine Aktion nur über angegeben wirdonclick
.Wenn Sie jedoch fragen, wie Sie am besten dynamische Aktionen durch Klicken auf ein DOM-Objekt erzielen können, ist das Anhängen eines Ereignisses mit Javascript, das vom Inhalt des Dokuments getrennt ist, der beste Weg. Sie können dies auf verschiedene Arten tun. Ein üblicher Weg ist die Verwendung einer Javascript-Bibliothek wie jQuery, um ein Ereignis zu binden:
quelle
ich benutze
Ein langer Weg, aber es erledigt den Job. Verwenden Sie einen A-Stil, um zu vereinfachen, dann wird es:
quelle
nohref
Attribut gehört. Dies ist die logischste / eleganteste Art, mit solchen Javascript-Aktionen umzugehen. Dies ist kompatibel mit FF12 und IE8. Deshalb werde ich alle meinehref="JavaScript:void(0);"
durch ersetzennohref
. Vielen Dank. Prost.nohref
ist ein Teil vonarea
Tag, nichta
! Ihr Beispiel ist das gleiche wie<a onClick="alert('Hello World')">HERE</a>
nohref
existiert nicht auf einema
Tag.Zusätzlich zu allen hier wird die href in der Statusleiste des Browsers angezeigt und nicht auf. Ich denke, es ist nicht benutzerfreundlich, dort Javascript-Code anzuzeigen.
quelle
Der beste Weg, dies zu tun, ist mit:
Das Problem ist, dass dadurch am Ende der URL der Seite im Browser ein Hash (#) hinzugefügt wird, sodass der Benutzer zweimal auf die Schaltfläche "Zurück" klicken muss, um zur Seite vor Ihrer zu gelangen. In Anbetracht dessen müssen Sie Code hinzufügen, um die Ereignisausbreitung zu stoppen. Die meisten Javascript-Toolkits haben bereits eine Funktion dafür. Zum Beispiel verwendet das Dojo-Toolkit
um dies zu tun.
quelle
href="#"
den Browser verwenden, nach einem benannten Ankertag gesucht wird und das Fenster zum Seitenanfang scrollen kann, was möglicherweise nicht auffällt, wenn der Browser nicht gefunden wird du bist schon oben Um dieses Verhalten zu vermeiden, verwenden Siehref="javascript:;"
stattdessen:Die beste Antwort ist eine sehr schlechte Praxis. Man sollte niemals einen Link zu einem leeren Hash erstellen, da dies später zu Problemen führen kann.
Am besten binden Sie einen Ereignishandler an das Element, wie zahlreiche andere angegeben haben. Er
<a href="javascript:doStuff();">do stuff</a>
funktioniert jedoch in jedem modernen Browser einwandfrei. Ich verwende ihn häufig beim Rendern von Vorlagen, um zu vermeiden, dass für jede Instanz erneut gebunden werden muss. In einigen Fällen bietet dieser Ansatz eine bessere Leistung. YMMVEin weiteres interessantes Leckerbissen ....
onclick
&href
haben unterschiedliche Verhaltensweisen beim direkten Aufruf von Javascript.onclick
wird denthis
Kontext korrekt übergeben, wohingegenhref
nicht oder mit anderen Worten<a href="javascript:doStuff(this)">no context</a>
nicht funktionieren wird, wohingegen<a onclick="javascript:doStuff(this)">no context</a>
wird.Ja, ich habe das weggelassen
href
. Dies entspricht zwar nicht der Spezifikation, funktioniert jedoch in allen Browsern, sollte jedoch im Idealfall einhref="javascript:void(0);"
gutes Maß enthaltenquelle
Das Vorhandensein
javascript:
eines Attributs, das nicht speziell für die Skripterstellung vorgesehen ist, ist eine veraltete HTML-Methode. Obwohl dies technisch funktioniert, weisen Sie einem Nicht-Skript-Attribut immer noch Javascript-Eigenschaften zu, was keine gute Vorgehensweise ist. Es kann sogar in alten oder sogar in modernen Browsern fehlschlagen (ein gegoogelter Forumsbeitrag scheint darauf hinzudeuten, dass Opera 'javascript:' URLs nicht mag).Eine bessere Vorgehensweise wäre die zweite Möglichkeit, Ihr Javascript in das
onclick
Attribut einzufügen , das ignoriert wird, wenn keine Skriptfunktion verfügbar ist. Fügen Sie eine gültige URL in das href-Feld (normalerweise '#') ein, um auf diejenigen zurückzugreifen, die kein Javascript haben.quelle
Bei dieser Codezeile hat es funktioniert:
quelle
Das funktioniert
quelle
Persönlich finde ich es ärgerlich, Javascript-Aufrufe in das HREF-Tag zu setzen. Normalerweise achte ich nicht wirklich darauf, ob etwas ein Javascript-Link ist oder nicht, und möchte oft Dinge in einem neuen Fenster öffnen. Wenn ich dies mit einer dieser Arten von Links versuche, wird eine leere Seite mit nichts darauf und Javascript in meiner Adressleiste angezeigt. Dies wird jedoch durch einen Onlick ein wenig umgangen.
quelle
Eine weitere Sache, die mir bei der Verwendung von "href" mit Javascript aufgefallen ist:
Das Skript im Attribut "href" wird nicht ausgeführt, wenn der Zeitunterschied zwischen zwei Klicks recht kurz war.
Versuchen Sie beispielsweise, das folgende Beispiel auszuführen, und doppelklicken Sie (schnell!) Auf jeden Link. Der erste Link wird nur einmal ausgeführt. Der zweite Link wird zweimal ausgeführt.
Wiedergabe in Chrome (Doppelklick) und IE11 (mit Dreifachklick). Wenn Sie in Chrome schnell genug klicken, können Sie 10 Klicks ausführen und nur 1 Funktion ausführen.
Firefox funktioniert einwandfrei.
quelle
Erstens ist es am
href
besten , die URL zu haben, da Benutzer damit Links kopieren, in einem anderen Tab öffnen usw. können.In einigen Fällen (z. B. Websites mit häufigen HTML-Änderungen) ist es nicht praktisch, bei jedem Update Links zu binden.
Typische Bindungsmethode
Normaler Link:
Und so etwas für JS:
Die Vorteile dieser Methode sind die saubere Trennung von Markup und Verhalten und müssen nicht die Funktionsaufrufe in jedem Link wiederholen.
Keine Bindungsmethode
Wenn Sie jedoch nicht jedes Mal binden möchten, können Sie onclick verwenden und das Element und das Ereignis übergeben, z.
Und das für JS:
Der Vorteil dieser Methode besteht darin, dass Sie jederzeit neue Links (z. B. über AJAX) laden können, ohne sich jedes Mal um das Binden kümmern zu müssen.
quelle
quelle
Ich habe festgestellt, dass Javascript: hrefs nicht funktioniert hat, als die Seite in die Webseitenfunktion von Outlook eingebettet war, in der ein E-Mail-Ordner so eingestellt ist, dass stattdessen eine URL angezeigt wird
quelle