JavaScript – href vs onclick für Callback-Funktion auf Hyperlink

Lesezeit: 7 Minuten

JavaScript href vs onclick fur Callback Funktion auf Hyperlink
Skunk Spinner

Ich möchte eine einfache JavaScript-Funktion auf einen Klick ohne Weiterleitung ausführen.

Gibt es einen Unterschied oder Vorteil zwischen dem Einfügen des JavaScript-Aufrufs in die href Attribut (etwa so):

<a href="javascript:my_function();window.print();">....</a>

vs. es in die setzen onclick Attribut (bindet es an die onclick Veranstaltung)?

  • Diese Frage wurde bereits diskutiert: stackoverflow.com/questions/245868/…

    – LösungYogi

    1. Juli 2009 um 19:07 Uhr

  • Und stackoverflow.com/questions/134845/…

    – Samson

    1. Juli 2009 um 19:13 Uhr

JavaScript href vs onclick fur Callback Funktion auf Hyperlink
demp

Schlecht:

<a id="myLink" href="https://stackoverflow.com/questions/1070760/javascript:MyFunction();">link text</a>

gut:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

besser:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

noch besser 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

noch besser 2:

<a id="myLink" title="Click to do something"
 href="https://stackoverflow.com/questions/1070760/PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Warum besser? da return false verhindert, dass der Browser dem Link folgt

Beste:

Verwenden Sie jQuery oder ein ähnliches Framework, um den Onclick-Handler nach Element-ID anzuhängen.

$('#myLink').click(function(){ MyFunction(); return false; });

1646312117 492 JavaScript href vs onclick fur Callback Funktion auf Hyperlink
Teil

Das Einfügen des Onclicks in die href würde diejenigen beleidigen, die stark an die Trennung von Inhalt und Verhalten/Aktion glauben. Das Argument ist, dass sich Ihre HTML-Inhalte ausschließlich auf den Inhalt konzentrieren sollten, nicht auf die Präsentation oder das Verhalten.

Der typische Weg besteht heutzutage darin, eine Javascript-Bibliothek (z. B. jquery) zu verwenden und einen Ereignishandler zu erstellen, der diese Bibliothek verwendet. Es würde in etwa so aussehen:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

1646312117 887 JavaScript href vs onclick fur Callback Funktion auf Hyperlink
Adam

Bezüglich Javascriptein Unterschied ist, dass die this Stichwort in der onclick Handler verweist auf das DOM-Element, dessen onclick Attribut ist es (in diesem Fall die <a> Element), wohingegen this in dem href Attribut bezieht sich auf die window Objekt.

Bezüglich Präsentationwenn ein href Attribut fehlt bei einem Link (z <a onclick="[...]">), dann zeigen Browser standardmäßig die text Cursor (und nicht die oft gewünschte pointer Cursor), da es die behandelt <a> als Anker und nicht als Link.

Bezüglich Verhaltenbei Angabe einer Aktion durch Navigation via hrefunterstützt der Browser normalerweise das Öffnen href in einem separaten Fenster über ein Shortcut- oder Kontextmenü. Dies ist nicht möglich, wenn eine Aktion nur über angegeben wird onclick.


Wenn Sie jedoch fragen, was der beste Weg ist, um dynamische Aktionen aus dem Klick auf ein DOM-Objekt zu erhalten, dann ist das Anhängen eines Ereignisses mit Javascript getrennt vom Inhalt des Dokuments der beste Weg. Sie können dies auf verschiedene Weise tun. Eine gängige Methode ist die Verwendung einer Javascript-Bibliothek wie jQuery, um ein Ereignis zu binden:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

  • Danke, dass Sie meinen Verdacht bestätigt haben, dass “this” in “href” vs. “onclick” anders ist.

    – joonas.fi

    13. August 2014 um 6:54 Uhr

JavaScript href vs onclick fur Callback Funktion auf Hyperlink
Clif Collins

REDAKTION WARNUNG: Siehe die Kommentare, die Verwendung von „nohref“ ist in dieser Antwort falsch.

ich benutze

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Ein langer Weg, aber es erledigt die Arbeit. Verwenden Sie einen A-Stil zur Vereinfachung, dann wird es:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

Die Top-Antwort ist eine sehr schlechte Praxis, man sollte niemals auf einen leeren Hash verlinken, da dies später zu Problemen führen kann.

Am besten binden Sie einen Event-Handler an das Element, wie zahlreiche andere Leute gesagt haben, aber <a href="https://stackoverflow.com/questions/1070760/javascript:doStuff();">do stuff</a> funktioniert perfekt in jedem modernen Browser, und ich verwende es ausgiebig beim Rendern von Vorlagen, um zu vermeiden, dass es für jede Instanz neu gebunden werden muss. In einigen Fällen bietet dieser Ansatz eine bessere Leistung. YMMV

Noch ein interessanter Hinweis….

onclick & href haben unterschiedliche Verhaltensweisen, wenn Javascript direkt aufgerufen wird.

onclick wird bestehen this Kontext richtig, während href nicht, oder mit anderen Worten <a href="https://stackoverflow.com/questions/1070760/javascript:doStuff(this)">no context</a> wird nicht funktionieren, während <a onclick="https://stackoverflow.com/questions/1070760/javascript:doStuff(this)">no context</a> Wille.

Ja, die habe ich weggelassen href. Obwohl dies nicht der Spezifikation entspricht, funktioniert es in allen Browsern, obwohl es idealerweise a enthalten sollte href="https://stackoverflow.com/questions/1070760/javascript:void(0);" für ein gutes Maß

1646312118 730 JavaScript href vs onclick fur Callback Funktion auf Hyperlink
Kamarey

Zusätzlich zu allen hier wird das href in der Statusleiste des Browsers angezeigt und onclick nicht. Ich denke, es ist nicht benutzerfreundlich, dort Javascript-Code anzuzeigen.

1646312118 569 JavaScript href vs onclick fur Callback Funktion auf Hyperlink
linusthe3rd

das geht am besten mit:

<a href="#" onclick="someFunction(e)"></a>

Das Problem ist, dass dies am Ende der URL der Seite im Browser eine Raute (#) hinzufügt, 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 etwas Code hinzufügen, um die Ereignisweitergabe zu stoppen. Die meisten Javascript-Toolkits haben dafür bereits eine Funktion. Zum Beispiel verwendet das Dojo-Toolkit

dojo.stopEvent(event);

dazu.

  • Ich möchte davor warnen, wenn Sie verwenden href="#" Der Browser sucht nach einem benannten Anker-Tag und da er es nicht findet, lässt er das Fenster zum Anfang der Seite scrollen, was möglicherweise nicht auffällt, wenn Sie sich bereits ganz oben befinden. Um dieses Verhalten zu vermeiden, verwenden Sie: href="javascript:;" stattdessen.

    – alonso.torres

    25. November 2011 um 16:04 Uhr


  • @alonso.torres Guter Punkt, aber deshalb habe ich die Verwendung von dojo.stopEvent() erwähnt – es stoppt die Ereignisausbreitung/Blasenbildung und das Standardverhalten des Klickens auf den Anker.

    – linusthe3rd

    26. November 2011 um 21:36 Uhr

  • Warum nicht statt stopEvent einfach false zurückgeben (onclick=”someFunction(e);return false;”)

    – Stracktracer

    24. Juli 2013 um 18:46 Uhr

923590cookie-checkJavaScript – href vs onclick für Callback-Funktion auf Hyperlink

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy