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


Im Folgenden finden Sie zwei Methoden zum Erstellen eines Links, der ausschließlich dazu dient, JavaScript-Code auszuführen. Was ist besser in Bezug auf Funktionalität, Seitenladegeschwindigkeit, Validierungszwecke 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>


3672


Ursprung


Antworten:


ich benutze javascript:void(0).

Drei Gründe. Ermutigung zur Verwendung von # in einem Team von Entwicklern führt unweigerlich dazu, dass einige den Rückgabewert der so genannten Funktion verwenden:

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

Aber dann vergessen sie zu benutzen return doSomething() im Onclick und einfach benutzen doSomething().

Ein zweiter Grund zu vermeiden # ist das das Finale 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 wird dynamisch zugewiesen. Ich bevorzuge es, eine Funktion aufrufen oder dynamisch zuweisen zu können, ohne die Funktion speziell für eine der beiden Methoden zu programmieren. Daher mein onclick (oder auf irgendetwas) in HTML Markup wie folgt aussehen:

onclick="someFunc.call(this)"

ODER

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

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

Wenn Sie also ein einzelner Entwickler sind, können Sie ganz klar Ihre eigene Entscheidung treffen, aber wenn Sie als Team arbeiten, müssen Sie entweder angeben:

Benutzen href="#", Stelle sicher onclick enthält immer return false; am Ende, dass jede aufgerufene Funktion keinen Fehler auslöst und wenn Sie eine Funktion dynamisch an die onclick Eigenschaft stellen Sie sicher, dass, ebenso wie nicht einen Fehler wirft es zurückgibt false.

ODER

Benutzen href="javascript:void(0)"

Die zweite ist deutlich einfacher zu kommunizieren.


2006



Weder.

Wenn Sie eine tatsächliche URL verwenden können, die sinnvoll ist, verwenden Sie diese als HREF. Der Onclick wird nicht ausgelöst, wenn jemand in der Mitte auf Ihren Link klickt, um einen neuen Tab zu öffnen oder wenn JavaScript deaktiviert ist.

Wenn das nicht möglich ist, sollten Sie zumindest das 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 angestrebt werden, eine öffentliche Website zu entwickeln.

Auschecken Unaufdringliches JavaScript und Progressive Enhancement (beide Wikipedia).


1198



Tun <a href="#" onclick="myJsFunc();">Link</a> oder <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> oder was auch immer das enthält onclick Attribut - war vor fünf Jahren okay, obwohl es jetzt eine schlechte Übung sein kann. Hier ist der Grund:

  1. Es fördert die Praxis von aufdringlichem JavaScript - das sich als schwierig und schwierig zu skalieren herausgestellt hat. Mehr dazu in Unaufdringliches JavaScript.

  2. Sie verbringen Ihre Zeit damit, unglaublich übertriebenen Code zu schreiben - was Ihrer Codebasis sehr wenig (wenn überhaupt) Vorteile bringt.

  3. Es gibt jetzt bessere, leichtere und besser wartbare und skalierbare Wege, um das gewünschte Ergebnis zu erreichen.

Der unaufdringliche JavaScript-Weg

Habe einfach keine href Attribut überhaupt! Ein gutes CSS-Reset würde den fehlenden Standard-Cursorstil berücksichtigen, so dass dies kein Problem darstellt. Dann fügen Sie Ihre JavaScript-Funktionalität mit anmutigen und unauffälligen Best Practices hinzu, die wartungsfreundlicher sind, da Ihre JavaScript-Logik in JavaScript und nicht in Ihrer Markup verbleibt. Dies ist wichtig, wenn Sie mit der Entwicklung von JavaScript-Anwendungen beginnen, die eine Aufteilung Ihrer Logik erfordern blackboxed Komponenten und Vorlagen. Mehr dazu in Groß angelegte JavaScript-Anwendungsarchitektur

Einfaches Codebeispiel

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

Ein Blackboxed Backbone.js Beispiel

Für ein skalierbares Blackbox-Backbone.js-Komponentenbeispiel - Sehen Sie sich dieses Beispiel an. Beachten Sie, wie wir unaufdringliche JavaScript-Praktiken einsetzen und in einer kleinen Menge Code eine Komponente haben, die mehrmals auf der Seite ohne Nebenwirkungen oder Konflikte zwischen den verschiedenen Komponenteninstanzen wiederholt werden kann. Tolle!

Anmerkungen

  • Das weglassen href Attribut auf dem a Element bewirkt, dass das Element nicht mit verwendet werden kann tab Schlüsselnavigation. Wenn Sie wünschen, dass diese Elemente über die tab Taste, können Sie die einstellen tabindex Attribut oder verwenden button Elemente stattdessen. Sie können Schaltflächenelemente so gestalten, dass sie wie normale Links aussehen, wie in Die Antwort von Tracker1.

  • Das weglassen href Attribut auf dem a Element wird verursachen Internet Explorer 6 und Internet Explorer 7 das nicht übernehmen a:hover Styling, weshalb wir ein einfaches JavaScript-Shim hinzugefügt haben, um dies zu erreichen a.hover stattdessen. Das ist vollkommen in Ordnung, als ob Sie kein href-Attribut und keine graziöse Verschlechterung haben, dann wird Ihr Link sowieso nicht funktionieren - und Sie werden größere Probleme haben, um die Sie sich kümmern müssen.

  • Wenn Sie möchten, dass Ihre Aktion weiterhin mit deaktiviertem JavaScript funktioniert, verwenden Sie ein a Element mit a href Attribut, das zu einer URL führt, die die Aktion manuell anstatt über eine Ajax-Anfrage oder was auch immer der Weg sein sollte. Wenn Sie dies tun, dann möchten Sie sicherstellen, dass Sie ein tun event.preventDefault() Klicken Sie auf Ihren Klick, um sicherzustellen, dass beim Klicken auf die Schaltfläche der Link nicht folgt. Diese Option wird als gradeful degradation bezeichnet.


734



'#' Ich werde den Benutzer zurück zum Anfang der Seite bringen, also gehe ich normalerweise mit void(0).

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


281



Ich würde es ehrlich gesagt auch nicht empfehlen. Ich würde eine stilisierte verwenden <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 auch vor, über das Skript zu binden, nicht mit dem onclick Attribut für das Element-Tag. Der einzige Fehler ist der psuedo 3D-Text-Effekt in älteren IEs, die nicht deaktiviert werden können.


Wenn du MUSS Verwende ein A-Element, benutze javascript:void(0); aus bereits genannten Gründen.

  • Wird immer abfangen, falls Ihr onclick-Ereignis fehlschlägt.
  • Es werden keine fehlerhaften Ladeaufrufe ausgeführt oder andere Ereignisse ausgelöst, die auf einer Hash-Änderung basieren
  • Das Hash-Tag kann zu unerwartetem Verhalten führen, wenn der Klick durchfällt (Onclick-Würfe), es vermeiden, es sei denn, es handelt sich um ein geeignetes Fall-Through-Verhalten, und Sie möchten den Navigationsverlauf ändern.

HINWEIS: Sie können das ersetzen 0 mit einer Zeichenfolge wie javascript:void('Delete record 123') Das kann als zusätzlicher Indikator dienen, der zeigt, was der Klick tatsächlich macht.


209



Die erste, idealerweise mit einem echten Link, falls der Benutzer JavaScript deaktiviert hat. Stellen Sie nur sicher, dass "false" zurückgegeben wird, um zu verhindern, dass das Klickereignis ausgelöst wird, wenn JavaScript ausgeführt wird.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Wenn Sie Angular2 verwenden, funktioniert dieser Weg:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Siehe hier https://stackoverflow.com/a/45465728/2803344


128



Im Idealfall würden Sie das tun:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Oder, noch besser, Sie hätten den Standard-Aktionslink im HTML-Code und würden das Element onclick nach dem DOM-Rendering unauffällig per JavaScript zum Element hinzufügen, um sicherzustellen, dass JavaScript nicht vorhanden ist Habe nutzlose Event-Handler, die deinen Code rätseln und möglicherweise deinen tatsächlichen Inhalt verschleiern (oder zumindest davon ablenken).


90



Weder wenn du mich fragst;

Wenn Ihr "Link" den einzigen Zweck hat, etwas JavaScript-Code auszuführen, ist dies kein Link; eher ein Stück Text mit einer daran gekoppelten JavaScript-Funktion. Ich würde empfehlen, ein zu verwenden <span> Tag mit einem onclick handler daran angehängt und einige grundlegende CSS, um einen Link nachzuahmen. Links werden für die Navigation erstellt, und wenn Ihr JavaScript-Code nicht zur Navigation dient, sollte dies nicht der Fall sein <a> Etikett.

Beispiel:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>


86



Verwenden Sie nur # macht ein paar lustige Bewegungen, also würde ich empfehlen zu verwenden #self wenn Sie bei Tippfehlern sparen möchten JavaScript bla, bla,.


73



Ich benutze Folgendes

<a href="javascript:;" onclick="myJsFunc();">Link</a>

stattdessen

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

55