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

Question

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

Answer 1

Der beste Weg, dies zu tun, ist mit:

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

Das Problem ist, dass dadurch im Browser eine Raute (#) an das Ende der URL der Seite angehängt wird, so dass der Benutzer zweimal auf die Schaltfläche "Zurück" klicken muss, um zu der Seite vor Ihrer Seite zu gelangen. In Anbetracht dessen müssen Sie etwas Code hinzufügen, um die Ereignisausbreitung zu stoppen. Die meisten Javascript-Toolkits haben bereits eine Funktion dafür. Zum Beispiel verwendet das Dojo-Toolkit

dojo.stopEvent(event);

zu tun.

Answer 2

Zusätzlich zu all dem hier wird die href in der Statusleiste des Browsers angezeigt, und beim Anklicken nicht. Ich denke, es ist nicht benutzerfreundlich, Javascript-Code dort zu zeigen.

Answer 3

Das funktioniert

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

Answer 4

Mit javascript: in jedem Attribut, das nicht speziell für Skripte gedacht ist, ist eine veraltete HTML-Methode. Technisch gesehen funktioniert es zwar, aber Sie weisen einem Nicht-Script-Attribut immer noch Javascript-Eigenschaften zu, was keine gute Praxis ist. Es kann sogar bei alten Browsern oder sogar bei einigen modernen Browsern scheitern (ein gegoogelter Forenbeitrag schien darauf hinzuweisen, dass Opera keine "javascript:"-URLs mag).

Eine bessere Praxis wäre der zweite Weg, um Ihr Javascript in der onclick Attribut, das ignoriert wird, wenn keine Skriptfunktionalität verfügbar ist. Setzen Sie eine gültige URL in das href-Feld (in der Regel '#') als Fallback für diejenigen, die kein Javascript haben.

Answer 5

Bei mir hat es mit dieser Codezeile funktioniert:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>