561 Stimmen

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

Ich möchte eine einfache JavaScript-Funktion bei einem Klick ohne Umleitung ausführen.

Gibt es einen Unterschied oder einen Vorteil, wenn man den JavaScript-Aufruf in der href Attribut (wie dieses):

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

im Gegensatz zum Einlegen in die onclick Attribut (Bindung an das onclick Ereignis)?

7 Stimmen

Diese Frage wurde bereits früher erörtert: stackoverflow.com/questions/245868/

2 Stimmen

1113voto

demp Punkte 12207

schlecht:

<a id="myLink" href="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="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Warum besser? weil return false wird verhindern, dass der Browser dem Link folgt

am besten:

Verwenden Sie jQuery oder ein ähnliches Framework, um einen Onclick-Handler nach der ID des Elements anzuhängen.

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

309voto

Parand Punkte 96946

Das Einfügen des Onclick in die href würde diejenigen beleidigen, die fest an die Trennung von Inhalt und Verhalten/Aktion glauben. Das Argument ist, dass sich Ihr HTML-Inhalt ausschließlich auf den Inhalt und nicht auf die Darstellung oder das Verhalten konzentrieren sollte.

Der typische Weg in diesen Tagen ist es, eine Javascript-Bibliothek (z. B. jquery) zu verwenden und erstellen Sie ein Ereignis-Handler mit dieser Bibliothek. Es würde etwa so aussehen:

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

75voto

Adam Punkte 1704

In Bezug auf javascript Ein Unterschied besteht darin, dass die this Schlüsselwort in der onclick Handler verweist auf das DOM-Element, dessen onclick Attribut ist (in diesem Fall das <a> Element), während this im href verweist auf das Attribut window Objekt.

In Bezug auf Präsentation wenn ein href Attribut in einer Verknüpfung fehlt (d. h. <a onclick="[...]"> ), dann zeigen die Browser standardmäßig die text Cursor (und nicht den oft gewünschten pointer Cursor), da es die <a> als Anker, und nicht als Link.

In Bezug auf Verhalten wenn die Angabe einer Aktion durch Navigation über href wird der Browser in der Regel das Öffnen dieser href in einem separaten Fenster entweder über eine Verknüpfung oder ein Kontextmenü. Dies ist nicht möglich, wenn Sie eine Aktion nur über onclick .


Wenn Sie sich jedoch fragen, was der beste Weg ist, um eine dynamische Aktion 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 Arten tun. Ein gängiger Weg ist die Verwendung einer Javascript-Bibliothek wie jQuery, um ein Ereignis zu binden:

<script type="text/javascript" src="//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>

19voto

Clif Collins Punkte 261

HINWEIS DES REDAKTIONSVORSITZENDEN: Siehe die Kommentare, die Verwendung von "nohref" ist in dieser Antwort nicht korrekt.

Ich benutze

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

Es ist ein langer Weg, aber er erfüllt seinen Zweck. 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>

17voto

slothstronaut Punkte 769

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

Am besten ist es jedoch, einen Ereignishandler an das Element zu binden, wie zahlreiche andere Personen erklärt haben, <a href="javascript:doStuff();">do stuff</a> funktioniert in jedem modernen Browser einwandfrei, und ich verwende es häufig beim Rendern von Vorlagen, um zu vermeiden, dass ich für jede Instanz neu binden muss. In einigen Fällen bietet dieser Ansatz eine bessere Leistung. YMMV

Ein weiteres interessantes Detail....

onclick & href haben unterschiedliche Verhaltensweisen, wenn sie Javascript direkt aufrufen.

onclick wird passieren this Kontext korrekt, während href nicht, oder mit anderen Worten <a href="javascript:doStuff(this)">no context</a> nicht funktionieren wird, während <a onclick="javascript:doStuff(this)">no context</a> wird.

Ja, ich habe das href . Obwohl dies nicht der Spezifikation entspricht, funktioniert es in allen Browsern, obwohl es idealerweise eine href="javascript:void(0);" obendrein

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X