it-swarm.com.de

JavaScript-Funktion in href vs. onclick

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

Gibt es einen Unterschied oder Vorteil, wenn Sie den JavaScript-Aufruf in das Attribut href setzen (wie folgt: 

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

) im Vergleich zum Platzieren in das Attribut onclick (Bindung an das Ereignis onclick)?

403
SkunkSpinner

Ein Klick in den Href würde diejenigen verletzen, die fest an die Trennung von Inhalt und Verhalten glauben. Das Argument ist, dass Ihr HTML-Inhalt sich ausschließlich auf den Inhalt konzentrieren sollte, nicht auf die Darstellung oder das Verhalten.

Der typische Pfad ist heutzutage die Verwendung einer Javascript-Bibliothek (z. B. Jquery) und das Erstellen eines Ereignishandlers, der diese Bibliothek verwendet. Es würde ungefähr so ​​aussehen:

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

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 den Browser daran hindert, dem Link zu folgen

Beste:  

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

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

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

In Bezug auf presentation : Wenn ein href-Attribut in einem Link nicht vorhanden ist (dh <a onclick="[...]">), zeigen Browser standardmäßig den text-Cursor (und nicht den häufig gewünschten pointer-Cursor) an, da der <a> als behandelt wird ein Anker und kein Link.

In Bezug auf Verhalten unterstützt der Browser bei der Angabe einer Aktion durch Navigation über href normalerweise das Öffnen dieser href in einem separaten Fenster, indem entweder ein Kontextmenü oder ein Kontextmenü verwendet wird. Dies ist nicht möglich, wenn eine Aktion nur über onclick angegeben wird.


Wenn Sie jedoch nach dem besten Weg fragen, wie Sie mit einem Klick auf ein DOM-Objekt eine dynamische Aktion erzielen können, 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 übliche Methode 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>
64
Adam

Ich benutze

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

Ein weiter Weg, aber die Arbeit wird erledigt. Verwenden Sie einen A-Stil zur Vereinfachung von Dann wird es zu:

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

am besten geht das mit:

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

Das Problem ist, dass dies am Ende der URL der Seite im Browser einen Hash (#) hinzufügt, so dass der Benutzer zweimal auf die Zurück-Schaltfläche klicken muss, um zur vorherigen Seite zu gelangen. In Anbetracht dessen müssen Sie Code hinzufügen, um die Weitergabe von Ereignissen zu stoppen. Die meisten Javascript-Toolkits haben hierfür bereits eine Funktion. Beispielsweise wird das Dojo-Toolkit verwendet 

dojo.stopEvent(event);

zu tun.

10
linusthe3rd

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

10
Kamarey

es hat für mich mit dieser Codezeile funktioniert: 

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

javascript: in einem beliebigen Attribut, das nicht speziell für die Skripterstellung bestimmt ist, ist eine veraltete Methode von HTML. Während es technisch funktioniert, weisen Sie einem Nicht-Skript-Attribut immer noch Javascript-Eigenschaften zu. Dies ist keine bewährte Methode. Es kann sogar an alten Browsern oder sogar an einigen modernen Browsern fehlschlagen (ein googled Forum-Beitrag scheint darauf hinzuweisen, dass Opera keine URLs wie "javascript:" mag).

Eine bessere Vorgehensweise wäre die zweite Möglichkeit, Ihr Javascript in das Attribut onclick zu setzen, das ignoriert wird, wenn keine Skriptfunktionen verfügbar sind. Geben Sie eine gültige URL in das Feld href (normalerweise '#') ein, um einen Fallback für diejenigen durchzuführen, die kein Javascript verwenden.

6
zombat

Das funktioniert

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

Die beste Antwort ist eine sehr schlechte Praxis. Man sollte niemals einen leeren Hash verknüpfen, da dies zu Problemen führen kann.

Am besten ist es, einen Event-Handler an das Element zu binden, da zahlreiche andere Personen angegeben haben, <a href="javascript:doStuff();">do stuff</a> funktioniert jedoch in jedem modernen Browser einwandfrei. Ich verwende ihn beim Rendern von Vorlagen ausgiebig, um nicht für jede Instanz erneut binden zu müssen. In einigen Fällen bietet dieser Ansatz eine bessere Leistung. YMMV

Ein weiterer interessanter Leckerbissen ....

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

onclick wird den this-Kontext korrekt übergeben, wohingegen href nicht oder mit anderen Worten <a href="javascript:doStuff(this)">no context</a> nicht funktioniert, wohingegen <a onclick="javascript:doStuff(this)">no context</a> nicht funktioniert.

Ja, ich habe die href weggelassen. Obwohl dies nicht der Spezifikation entspricht, funktioniert es in allen Browsern, obwohl es im Idealfall eine href="javascript:void(0);" enthalten sollte, um ein gutes Maß zu erhalten

4
Eduardo

Persönlich finde ich es störend, Javascript-Aufrufe im HREF-Tag zu setzen. Ich achte normalerweise nicht wirklich darauf, ob etwas ein Javascript-Link ist oder nicht, und oft möchte ich Dinge in einem neuen Fenster öffnen. Wenn ich versuche, dies mit einem dieser Links zu tun, erhalte ich eine leere Seite mit nichts und Javascript in meiner Adressleiste. Dies wird jedoch durch einen Onlick etwas abgewendet.

4
Peter

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 zum Beispiel folgendes 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>

Wiedergabe in Chrome (Doppelklick) und IE11 (mit Dreifachklick) . Wenn Sie in Chrome schnell genug klicken, können Sie 10 Klicks machen und nur eine Funktion ausführen.

Firefox funktioniert gut.

3
kolobok
 <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>   
1
Andrew

Erstens ist es am besten, die URL in href zu haben, da es Benutzern ermöglicht, Links zu kopieren, in einem anderen Tab zu öffnen usw.

In einigen Fällen (z. B. auf Websites mit häufigen HTML-Änderungen) ist es nicht sinnvoll, bei jedem Update Links zu binden.

Typische Bindemethode

Normaler Link:

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

Und so etwas für JS:

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

Die Vorteile dieser Methode sind eine saubere Trennung von Markup und Verhalten und müssen die Funktionsaufrufe nicht 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.

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

Und das für JS:

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

Der Vorteil dieser Methode besteht darin, dass Sie jederzeit neue Links laden können (z. B. über AJAX), ohne sich jedes Mal Gedanken über das Binden machen zu müssen.

0
jchavannes

Ich habe festgestellt, dass das JavaScript: hrefs nicht funktionierte, als die Seite in die Outlook-Webseitenfunktion eingebettet wurde, in der ein Mail-Ordner statt einer URL angezeigt wurde

0
Christian