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

Gibt es einen Unterschied oder Vorteil zwischen dem Einfügen des JavaScript-Aufrufs in das hrefAttribut (wie folgt:

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

) vs. in das onclickAttribut einfügen (an das onclickEreignis binden )?

Das Setzen des Onclicks innerhalb der href würde diejenigen beleidigen, die stark an die Trennung von Inhalten von Verhalten / Handeln glauben. Das Argument ist, dass sich Ihr HTML-Inhalt ausschließlich auf den Inhalt konzentrieren sollte, nicht auf die Präsentation oder das Verhalten.

Heutzutage besteht der typische Pfad darin, eine Javascript-Bibliothek (z. B. jquery) zu verwenden und mithilfe dieser Bibliothek einen Ereignishandler zu erstellen. Es würde ungefähr so ​​aussehen:

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

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 falseverhindert, dass der Browser dem Link folgt

Beste:

Verwenden Sie jQuery oder ein ähnliches Framework, um den onclick-Handler anhand der ID des Elements anzuhängen.

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

In Bezug auf Javascript besteht ein Unterschied darin, dass das thisSchlüsselwort im onclickHandler auf das DOM-Element verweist, dessen onclickAttribut es ist (in diesem Fall das <a>Element), während sich thisdas hrefAttribut auf das windowObjekt bezieht .

Wenn in Bezug auf die Darstellung ein hrefAttribut in einem Link fehlt (dh <a onclick="[...]">), zeigen Browser standardmäßig den textCursor (und nicht den häufig gewünschten pointerCursor) an, da er den <a>als Anker und nicht als Link behandelt.

In Bezug auf das Verhalten unterstützt hrefder Browser beim Festlegen einer Aktion durch Navigation über normalerweise das Öffnen dieser Aktion hrefin einem separaten Fenster über eine Verknüpfung oder ein Kontextmenü. Dies ist nicht möglich, wenn eine Aktion nur über angegeben wird onclick.

Wenn Sie jedoch fragen, wie Sie am besten dynamische Aktionen durch Klicken auf ein DOM-Objekt erzielen können, ist das Anhängen eines Ereignisses mit Javascript, das vom Inhalt des Dokuments getrennt ist, der beste Weg. Sie können dies auf verschiedene Arten tun. Ein üblicher 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>

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 den Job. Verwenden Sie einen A-Stil, um zu vereinfachen, dann wird es:

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

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

Der beste Weg, dies zu tun, ist mit:

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

Das Problem ist, dass dadurch am Ende der URL der Seite im Browser ein Hash (#) hinzugefügt wird, 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 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);

um dies zu tun.

Die beste Antwort ist eine sehr schlechte Praxis. Man sollte niemals einen Link zu einem leeren Hash erstellen, da dies später zu Problemen führen kann.

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

Ein weiteres interessantes Leckerbissen ....

onclick& hrefhaben unterschiedliche Verhaltensweisen beim direkten Aufruf von Javascript.

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

Ja, ich habe das weggelassen href. Dies entspricht zwar nicht der Spezifikation, funktioniert jedoch in allen Browsern, sollte jedoch im Idealfall ein href="javascript:void(0);"gutes Maß enthalten

Das Vorhandensein javascript:eines Attributs, das nicht speziell für die Skripterstellung vorgesehen ist, ist eine veraltete HTML-Methode. Obwohl dies technisch funktioniert, weisen Sie einem Nicht-Skript-Attribut immer noch Javascript-Eigenschaften zu, was keine gute Vorgehensweise ist. Es kann sogar in alten oder sogar in modernen Browsern fehlschlagen (ein gegoogelter Forumsbeitrag scheint darauf hinzudeuten, dass Opera 'javascript:' URLs nicht mag).

Eine bessere Vorgehensweise wäre die zweite Möglichkeit, Ihr Javascript in das onclickAttribut einzufügen , das ignoriert wird, wenn keine Skriptfunktion verfügbar ist. Fügen Sie eine gültige URL in das href-Feld (normalerweise '#') ein, um auf diejenigen zurückzugreifen, die kein Javascript haben.

Bei dieser Codezeile hat es funktioniert:

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

Das funktioniert

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

Persönlich finde ich es ärgerlich, Javascript-Aufrufe in das HREF-Tag zu setzen. Normalerweise achte ich nicht wirklich darauf, ob etwas ein Javascript-Link ist oder nicht, und möchte oft Dinge in einem neuen Fenster öffnen. Wenn ich dies mit einer dieser Arten von Links versuche, wird eine leere Seite mit nichts darauf und Javascript in meiner Adressleiste angezeigt. Dies wird jedoch durch einen Onlick ein wenig umgangen.

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 beispielsweise, 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>

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

Firefox funktioniert einwandfrei.

Erstens ist es am hrefbesten , die URL zu haben, da Benutzer damit Links kopieren, in einem anderen Tab öffnen usw. können.

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

Typische Bindungsmethode

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 die saubere Trennung von Markup und Verhalten und müssen nicht die Funktionsaufrufe 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 (z. B. über AJAX) laden können, ohne sich jedes Mal um das Binden kümmern zu müssen.

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

Ich habe festgestellt, dass Javascript: hrefs nicht funktioniert hat, als die Seite in die Webseitenfunktion von Outlook eingebettet war, in der ein E-Mail-Ordner so eingestellt ist, dass stattdessen eine URL angezeigt wird