JavaScript-Funktion in href vs. onclick

Setzen die onclick im href verstoßen würde diejenigen, die glauben, stark in der Trennung von Inhalt und Verhalten/handeln. Das argument ist, dass der html-Inhalt sollte jedoch konzentriert sich ausschließlich auf Inhalte, nicht auf Präsentation oder Verhalten.

Der typische Weg in diesen Tagen, ist die Verwendung einer javascript-Bibliothek (zB. jquery) und erstellen Sie einen event-handler mit, dass die Bibliothek. Es würde so Aussehen:

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

InformationsquelleAutor der Antwort Parand

In Bezug auf javascript, ein Unterschied ist, dass die this Schlüsselwort in der onclick handler beziehen sich auf das DOM-element, dessen onclick - Attribut es sich handelt (in diesem Fall die <a> - element), in der Erwägung, dass this im href Attribut verweisen auf die window Objekt.

In Bezug auf Präsentation, wenn ein href Attribut abwesend ist, einen link (z.B. <a onclick="[...]">) und dann in der Standardeinstellung Browser zeigen die text cursor (und nicht die oft gewünschte pointer cursor), da Sie die Behandlung der <a> wie ein Anker, und nicht einen link.

In Bezug auf Verhalten, bei der Angabe einer Aktion, die von der navigation über href der browser unterstützen in der Regel die Eröffnung, dass href in einem separaten Fenster, indem Sie entweder einen shortcut oder Kontextmenü. Dies ist nicht möglich bei der Angabe einer Aktion nur über onclick.

Jedoch, wenn Sie sich Fragen, was ist der beste Weg, um dynamische Aktion aus klicken Sie auf ein DOM-Objekt, dann das anbringen einer Veranstaltung mit javascript, trennen von Inhalt des Dokuments ist der beste Weg zu gehen. Sie könnten dies in einer Reihe von Möglichkeiten. Eine gängige Möglichkeit ist die Verwendung einer javascript-Bibliothek wie jQuery zu binden, ein Ereignis:

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

InformationsquelleAutor der Antwort Adam

Zusätzlich zu allen hier, die href angezeigt auf der Statusleiste des Browsers, und onclick nicht. Ich denke, es ist nicht benutzerfreundlich, zu zeigen javascript-code.

InformationsquelleAutor der Antwort Kamarey

es funktionierte für mich mit dieser Zeile code:

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

InformationsquelleAutor der Antwort Omar Yassin Carcelen

Persönlich finde ich, dass putting ruft javascript im HREF-tag nervig. Meist habe ich nicht wirklich achten, ob oder ob nicht etwas ist ein javascript-link oder nicht, und oft öffnen möchten, die Dinge in einem neuen Fenster. Wenn ich versuche, dies zu tun mit einer dieser Arten von links, erhalte ich eine leere Seite mit nichts drauf und javascript in meinem Ort bar. Dies ist jedoch umgangen ein bit mit einem onlick.

InformationsquelleAutor der Antwort Peter

Die top-Antwort ist eine sehr schlechte Praxis, man sollte nie den link zu einem leeren hash, wie es kann zu Problemen führen, die Straße hinunter.

Besten binden Sie einen event-handler an das element, wie zahlreiche andere Personen haben angegeben, jedoch <a href="javascript:doStuff();">do stuff</a> perfekt funktioniert in jedem modernen browser, und ich benutze Sie ausgiebig, wenn das Rendern von templates zu vermeiden, zu binden, die für jede Instanz. In manchen Fällen kann dieser Ansatz bietet eine bessere Leistung. YMMV

Anderen interessanten tid-bit....

onclick & href unterschiedliches Verhalten beim aufrufen von javascript direkt.

onclick passieren this Kontext korrekt, in der Erwägung, dass href nicht, oder in anderen Worten <a href="javascript:doStuff(this)">no context</a> wird nicht funktionieren, in der Erwägung, dass <a onclick="javascript:doStuff(this)">no context</a> wird.

Ja, ich ließ das href. Während der Folge nicht die Skillung, es funktioniert in allen Browsern, obwohl im Idealfall sollte es eine href="javascript:void(0);" für eine gute Maßnahme

InformationsquelleAutor der Antwort Eduardo

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

InformationsquelleAutor der Antwort Andrew