Welchen "href"-Wert sollte ich für JavaScript-Links verwenden, "#" oder "javascript:void(0)"?

Question

Im Folgenden werden zwei Methoden zum Aufbau einer Verknüpfung beschrieben, die ausschließlich dazu dient, JavaScript-Code auszuführen. Welche ist besser in Bezug auf Funktionalität, Seitenladegeschwindigkeit, Validierung usw.?

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

oder

function myJsFunc() {
    alert("myJsFunc");
}

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Answer 1

Ich benutze javascript:void(0) .

Drei Gründe. Förderung der Verwendung von # in einem Team von Entwicklern führt unweigerlich dazu, dass einige den Rückgabewert der aufgerufenen Funktion wie folgt verwenden:

function doSomething() {
    //Some code
    return false;
}

Aber dann vergessen sie, die return doSomething() im Onclick und verwenden Sie einfach doSomething() .

Ein zweiter Grund für die Vermeidung von # ist, dass die endgültige return false; wird nicht ausgeführt, wenn die aufgerufene Funktion einen Fehler auslöst. Daher müssen die Entwickler auch daran denken, jeden Fehler in der aufgerufenen Funktion angemessen zu behandeln.

Ein dritter Grund ist, dass es Fälle gibt, in denen die onclick Ereigniseigenschaft dynamisch zugewiesen wird. Ich ziehe es vor, eine Funktion aufzurufen oder dynamisch zuzuweisen, ohne die Funktion speziell für die eine oder andere Anbringungsmethode programmieren zu müssen. Daher ist mein onclick (oder auf irgendetwas) in HTML-Auszeichnungen sehen so aus:

onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"

Verwendung von javascript:void(0) vermeidet alle oben genannten Kopfschmerzen, und ich habe keine Beispiele für einen Nachteil gefunden.

Wenn Sie also ein einsamer Entwickler sind, können Sie Ihre eigene Entscheidung treffen, aber wenn Sie in einem Team arbeiten, müssen Sie sich für eine der beiden Möglichkeiten entscheiden:

Utilisez href="#" vergewissern Sie sich onclick enthält immer return false; am Ende, damit eine aufgerufene Funktion keinen Fehler auslöst, und wenn Sie eine Funktion dynamisch an die onclick Eigenschaft stellen Sie sicher, dass sie nicht nur keinen Fehler auslöst, sondern auch false .

OR

Utilisez href="javascript:void(0)"

Das zweite ist natürlich viel einfacher zu vermitteln.

Answer 2

Weder noch.

Wenn Sie eine tatsächliche URL haben, die sinnvoll ist, verwenden Sie diese als HREF. Der Onclick wird nicht ausgelöst, wenn jemand mit der mittleren Maustaste auf Ihren Link klickt, um eine neue Registerkarte zu öffnen, oder wenn er JavaScript deaktiviert hat.

Wenn das nicht möglich ist, sollten Sie zumindest den Anker-Tag mit JavaScript und den entsprechenden Click-Event-Handlern in das Dokument einfügen.

Mir ist klar, dass dies nicht immer möglich ist, aber meiner Meinung nach sollte es bei der Entwicklung jeder öffentlichen Website angestrebt werden.

Überprüfen Sie _Unaufdringliches JavaScript y Progressive Verbesserung_ (beide Wikipedia).

Answer 3

Tun <a href="#" onclick="myJsFunc();">Link</a> o <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> oder irgendetwas anderes, das eine onclick Attribut - war vor fünf Jahren noch in Ordnung, aber heute kann es eine schlechte Praxis sein. Hier ist der Grund dafür:

1. Sie fördert die Praxis des aufdringlichen JavaScript, das sich als schwer zu pflegen und schwer zu skalieren erwiesen hat. Mehr dazu unter _Unaufdringliches JavaScript_ .

2. Sie verbringen Ihre Zeit damit, unglaublich ausführlichen Code zu schreiben - was Ihrer Codebasis nur sehr wenig (wenn überhaupt) nützt.

3. Es gibt jetzt bessere, einfachere und besser zu wartende und skalierbare Möglichkeiten, das gewünschte Ergebnis zu erzielen.

Der unaufdringliche JavaScript-Weg

Haben Sie einfach keine href Attribut überhaupt nicht! Jeder gute CSS-Reset würde sich um den fehlenden Standard-Cursorstil kümmern, so dass dies kein Problem darstellt. Dann fügen Sie Ihre JavaScript-Funktionalität mit eleganten und unaufdringlichen Best Practices ein, die leichter zu warten sind, da Ihre JavaScript-Logik in JavaScript und nicht in Ihrem Markup verbleibt - was unerlässlich ist, wenn Sie mit der Entwicklung umfangreicher JavaScript-Anwendungen beginnen, bei denen Ihre Logik in Blackbox-Komponenten und Vorlagen aufgeteilt werden muss. Mehr dazu in Groß angelegte JavaScript-Anwendungsarchitektur

Einfaches Code-Beispiel

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Eine Blackbox Backbone.js Beispiel

Für ein skalierbares Backbone.js-Komponentenbeispiel mit Blackboxing - siehe dieses funktionierende jsfiddle Beispiel hier . Beachten Sie, wie wir unaufdringliche JavaScript-Praktiken verwenden und mit einer winzigen Menge an Code eine Komponente haben, die auf der Seite mehrfach wiederholt werden kann, ohne dass es zu Nebeneffekten oder Konflikten zwischen den verschiedenen Komponenteninstanzen kommt. Erstaunlich!

Notas

• Das Weglassen des href Attribut auf der a Element führt dazu, dass das Element nicht mehr über tab wichtige Navigation. Wenn Sie möchten, dass diese Elemente über die tab Taste können Sie die tabindex Attribut, oder verwenden Sie button Elemente stattdessen. Sie können Schaltflächenelemente einfach so gestalten, dass sie wie normale Links aussehen, wie in Tracker1's Antwort .

• Das Weglassen des href Attribut auf der a Element verursacht Internet Explorer 6 y Internet Explorer 7 sich nicht mit der a:hover Deshalb haben wir ein einfaches JavaScript-Shim hinzugefügt, das dies über a.hover stattdessen. Das ist völlig in Ordnung, denn wenn Sie kein href-Attribut und keine anmutige Degradierung haben, wird Ihr Link sowieso nicht funktionieren - und Sie haben größere Probleme, um die Sie sich kümmern müssen.

• Wenn Sie möchten, dass Ihre Aktion auch bei deaktiviertem JavaScript funktioniert, dann verwenden Sie eine a Element mit einer href Attribut, das zu einer URL führt, die die Aktion manuell statt über eine Ajax-Anfrage oder was auch immer durchführen wird, sollte der Weg sein. Wenn Sie dies tun, dann sollten Sie sicherstellen, dass Sie eine event.preventDefault() bei Ihrem Klickaufruf, um sicherzustellen, dass die Schaltfläche beim Anklicken nicht dem Link folgt. Diese Option wird als "graceful degradation" bezeichnet.

Answer 4

'#' bringt den Benutzer zurück an den Anfang der Seite, daher verwende ich normalerweise void(0) .

javascript:; verhält sich auch wie javascript:void(0);

Answer 5

Ich würde ehrlich gesagt weder das eine noch das andere vorschlagen. Ich würde eine stilisierte <button></button> für dieses Verhalten.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

Auf diese Weise können Sie Ihren Onclick zuweisen. Ich schlage außerdem vor, die Bindung über ein Skript vorzunehmen, nicht über die onclick Attribut auf dem Element-Tag. Das einzige Problem ist der Pseudo-3D-Texteffekt in älteren IEs, der nicht deaktiviert werden kann.

---

Wenn Sie MUSS ein A-Element verwenden, verwenden Sie javascript:void(0); aus den bereits genannten Gründen.

• Wird immer unterbrochen, falls Ihr onclick-Ereignis fehlschlägt.
• Keine fehlerhaften Ladeaufrufe oder Auslösung anderer Ereignisse aufgrund einer Hash-Änderung
• Das Hashtag kann zu unerwartetem Verhalten führen, wenn der Klick durchfällt (onclick throws). Vermeiden Sie es, es sei denn, es ist ein angemessenes Fall-Through-Verhalten, und Sie möchten den Navigationsverlauf ändern.

HINWEIS: Sie können die 0 mit einer Zeichenkette wie javascript:void('Delete record 123') die als zusätzlicher Indikator dienen kann, der anzeigt, was der Klick tatsächlich bewirkt.