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

Erstens, die Url in href ist am besten geeignet, da es den Nutzern ermöglicht, Links zu kopieren, in einer anderen Registerkarte zu öffnen usw.

In manchen Fällen (z. B. bei Websites mit häufigen HTML-Änderungen) ist es nicht sinnvoll, Links bei jeder Aktualisierung zu binden.

Typische Bindungsmethode

Normale Verbindung:

<a href="https://www.google.com/">Google<a/>

Und etwas Ähnliches für JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

Die Vorteile dieser Methode sind die saubere Trennung von Markup und Verhalten und dass die Funktionsaufrufe nicht in jedem Link wiederholt werden müssen.

Keine Bindungsmethode

Wenn Sie jedoch nicht jedes Mal binden wollen, können Sie onclick verwenden und das Element und das Ereignis übergeben, z. B.:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

Und dies für JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

Der Vorteil dieser Methode ist, dass Sie jederzeit neue Links (z. B. über AJAX) einfügen können, ohne sich jedes Mal um die Bindung kümmern zu müssen.

Answer 2

Ich persönlich finde es lästig, Javascript-Aufrufe in den HREF-Tag zu setzen. Normalerweise achte ich nicht darauf, ob etwas ein Javascript-Link ist oder nicht, und oft möchte ich Dinge in einem neuen Fenster öffnen. Wenn ich dies mit einem dieser Links versuche, erhalte ich eine leere Seite mit nichts darauf und Javascript in meiner Adressleiste. Allerdings ist dies ein wenig durch die Verwendung eines onlick umgangen.

Answer 3

Die am meisten hochgestimmte Antwort ist heute veraltet

Ich würde das genaue Gegenteil empfehlen, siehe Schritt für Schritt mit Begründung:

gut:

<a id="myLink" href="javascript:MyFunction();">link text</a>

Es kommt darauf an, könnte gut sein, denn Crawler folgen href-Zielen und wenn es irgendeinen sinnvollen Inhalt gibt, der von MyFunction() (dynamischer Link), wird er eher verfolgt als beim Klick-Ereignis, das mehrere oder keine Zuhörer haben kann.

schlecht :

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

# bedeutet bedeutungsloser Link, Crawler sind oft nur an den ersten x Links interessiert, so dass es sie daran hindern kann, einigen sinnvollen Links später auf der Seite zu folgen.

schlechter:

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

Wie zuvor plus return false verhindert, dass Sie dem Link folgen. Wenn andere Skripte einen weiteren Listener hinzufügen und das Ziel aktualisieren wollen (z. B. um über einen Proxy umzuleiten), können sie das nicht, ohne den Onclick zu ändern (okay, das ist nur ein kleiner Rückschlag, da solche Anwendungsfälle eher theoretisch sind).

das Schlimmste:

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

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

jQuery ist im Jahr 2020+ veraltet und sollten nicht in neuen Projekten verwendet werden .

Ereignisse in href

Der href-Attribut-Handler erhält nicht das Ereignisobjekt, so dass der Handler nicht implizit sieht, welcher Link die Quelle war. Sie können es in onclick Handler hinzufügen, die vor der href gefolgt wird gefeuert:

<a href="javascript:my_function(event2)" onclick="event2=event">
  JS based link
</a>

<script>
function my_function(e) {
  console.log(e.target); // the source of the click
  if(something) location.href = ...; // dynamic link
}
</script>

Answer 4

Eine weitere Sache, die mir bei der Verwendung von "href" mit Javascript aufgefallen ist:

Das Skript im "href"-Attribut wird nicht ausgeführt, wenn der Zeitunterschied zwischen 2 Klicks recht kurz war.

Versuchen Sie zum Beispiel, 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.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Reproduziert in Chrome (Doppelklick) und IE11 (mit Dreifachklick). In Chrome kann man, wenn man schnell genug klickt, 10 Klicks machen und nur 1 Funktion ausführen lassen.

Firefox funktioniert gut.

Answer 5

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>