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

4076

Im Folgenden finden Sie zwei Methoden zum Erstellen eines Links, der ausschließlich zum Ausführen von JavaScript-Code dient. 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>

Peter Mortensen
quelle
202
Es sei denn, ich vermisse etwas, <a href="javascript:void(0)" onclick="myJsFunc();">macht absolut keinen Sinn. Wenn Sie müssen die Verwendung javascript:psuedo-Protokoll, brauchen Sie nicht das onclickAttribut als auch. <a href="javascript:myJsFunc();">wird gut tun.
Wesley Murch
65
@WesleyMurch - Wenn myJsFunc()ein Rückgabewert vorliegt , wird Ihre Seite unterbrochen . jsfiddle.net/jAd9G Sie müssten immer noch voidso verwenden : <a href="javascript:void myJsFunc();">. Aber dann würde sich das Verhalten immer noch unterscheiden. Das Aufrufen des Links über das Kontextmenü löst das clickEreignis nicht aus.
gilly3
38
Warum nicht einfach <a href="javascript:;" onclick="myEvent()"?
3k
26
javascript:;ist viel schneller zu tippen alsjavascript:void(0)
Mike Causer
78
Der erste Gedanke beim Betrachten: "Warum sollten Sie ein <a>Tag verwenden, wenn Sie NICHT eine andere Seite über die native Browserfunktion öffnen möchten, sondern eine Javascript-Aktion auslösen möchten? Verwenden Sie einfach ein spanTag mit einer Klasse von js-triggerwäre wohl viel besser ". Oder fehlt mir etwas?
Adrien Be

Antworten:

2164

Ich benutze javascript:void(0).

Drei Gründe. Die Förderung der Verwendung #in einem Entwicklerteam führt zwangsläufig dazu, dass einige den Rückgabewert der so genannten Funktion verwenden:

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

Aber dann vergessen sie, return doSomething()im Onclick zu verwenden und nur zu verwenden doSomething().

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

Ein dritter Grund ist, dass es Fälle gibt, in denen die onclickEreigniseigenschaft dynamisch zugewiesen wird. Ich bevorzuge es, eine Funktion aufrufen oder dynamisch zuweisen zu können, ohne die Funktion speziell für die eine oder andere Anhangsmethode codieren zu müssen. Daher onclicksieht mein (oder irgendetwas anderes) HTML-Markup folgendermaßen aus:

onclick="someFunc.call(this)"

ODER

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

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

Wenn Sie ein Einzelentwickler sind, können Sie eindeutig Ihre eigene Wahl treffen. Wenn Sie jedoch als Team arbeiten, müssen Sie Folgendes angeben:

Verwenden Sie href="#", stellen Sie sicher , dass am Ende onclickimmer enthalten ist return false;, dass eine aufgerufene Funktion keinen Fehler auslöst. Wenn Sie eine Funktion dynamisch an die onclickEigenschaft anhängen, stellen Sie sicher, dass sie nicht nur einen Fehler auslöst, sondern auch zurückgibt false.

ODER

Verwenden href="javascript:void(0)"

Der zweite ist eindeutig viel einfacher zu kommunizieren.

AnthonyWJones
quelle
329
Ich öffne immer jeden Link in einem neuen Tab und das ist der Grund, warum ich es persönlich hasse, wenn Leute die href="javascript:void(0)"Methode verwenden
Timo Huovinen
182
Entschuldigung, nicht einverstanden, warum hat diese Antwort so viele positive Stimmen? Jede Verwendung von javascript:sollte als schlechte Praxis, aufdringlich und nicht als würdevolle Herabstufung angesehen werden.
Lankymart
52
Die nächsten beiden Antworten sind weitaus besser und vernünftiger als diese. Auch die ersten beiden Argumente sind ungültig, da sie event.preventDefault()genau dazu dienen, das Standardverhalten zu verhindern (wie in diesem Fall an den Anfang der Seite zu springen) und es ohne all die return false;Verrücktheit besser zu machen .
Sudee
136
Schneller Vorlauf bis 2013: javascript:void(0)Verstößt gegen die Inhaltssicherheitsrichtlinie auf CSP-fähigen HTTPS-Seiten. Eine Möglichkeit wäre dann, href='#'und event.preventDefault()im Handler zu verwenden, aber ich mag das nicht so sehr. Vielleicht können Sie eine Konvention festlegen href='#void'und sicherstellen, dass kein Element auf der Seite vorhanden ist id="void". Auf diese Weise wird durch Klicken auf einen Link zu einem nicht vorhandenen Anker die Seite nicht gescrollt.
jakub.g
24
Sie können "#" verwenden und dann ein Klickereignis an alle Links mit "#" als "binden" href. Dies würde in jQuery gemacht werden mit:$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });
Nathan
1325

Weder.

Wenn Sie eine sinnvolle URL haben können, verwenden Sie diese als HREF. Der Onclick wird nicht ausgelöst, wenn jemand mit der mittleren Maustaste auf Ihren Link klickt, um einen neuen Tab zu öffnen, oder wenn JavaScript deaktiviert ist.

Wenn dies nicht möglich ist, sollten Sie mindestens das Ankertag mit JavaScript und den entsprechenden Klickereignishandlern in das Dokument einfügen.

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

Schauen Sie sich Unauffälliges JavaScript und Progressive Enhancement (beide Wikipedia) an.

Aaron Wagner
quelle
19
Können Sie ein Beispiel geben, wie man "das Ankertag mit JavaScript und den entsprechenden Klickereignishandlern in das Dokument einfügen kann"?
user456584
11
Warum sollte das Ankertag überhaupt eingefügt werden, wenn es lediglich dazu dienen soll, dass ein Element a) angeklickt wird, b) der "Zeiger" -Cursor angezeigt wird? Es scheint irrelevant, in diesem Szenario sogar ein Ankertag einzufügen.
Crush
12
+1 für keine, aber es gibt über Ansätze. Tatsache bleibt die Verwendung von einer javascript:oder #beiden schlechten Praktiken und nicht zu fördern. Schöne Artikel übrigens.
Lankymart
13
@crush: Ich würde auch kein div oder span verwenden; Ehrlich gesagt scheint dies genau das Richtige <button>zu sein. Aber einverstanden: Es sollte wahrscheinlich nicht speziell ein <a>Ort sein, zu dem es einen geeigneten Link gibt.
CHao
14
@cHao Button ist vielleicht die beste Wahl. Ich nehme an, der Hauptpunkt ist, dass das HTML-Element nicht anhand seines Standardpräsentationsbildes ausgewählt werden sollte, sondern aufgrund seiner Bedeutung für die Struktur des Dokuments.
Crush
775

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

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

  2. Sie verbringen Ihre Zeit damit, unglaublich übermäßig ausführlichen Code zu schreiben - was Ihrer Codebasis nur sehr wenig (wenn überhaupt) zugute kommt.

  3. Es gibt jetzt bessere, einfachere und wartbarere und skalierbarere Möglichkeiten, um das gewünschte Ergebnis zu erzielen.

Der unauffällige JavaScript-Weg

Hab einfach überhaupt kein hrefAttribut! Bei einem guten CSS-Reset wird der fehlende Standardcursorstil behoben, sodass dies kein Problem darstellt. Fügen Sie dann Ihre JavaScript-Funktionalität mithilfe eleganter und unauffälliger Best Practices hinzu, die besser zu warten sind, da Ihre JavaScript-Logik in JavaScript und nicht in Ihrem Markup verbleibt. Dies ist wichtig, wenn Sie mit der Entwicklung umfangreicher JavaScript-Anwendungen beginnen, in die Ihre Logik aufgeteilt werden muss Blackbox-Komponenten und Vorlagen. Mehr dazu in der JavaScript-Anwendungsarchitektur in großem Maßstab

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

Ein skalierbares Beispiel für eine Backbox.js- Komponente mit Blackbox finden Sie in diesem funktionierenden Beispiel für jsfiddle hier . Beachten Sie, wie wir unauffällige JavaScript-Praktiken verwenden und in einer winzigen Menge Code eine Komponente haben, die ohne Nebenwirkungen oder Konflikte zwischen den verschiedenen Komponenteninstanzen mehrmals auf der Seite wiederholt werden kann. Tolle!

Anmerkungen

  • Wenn Sie das hrefAttribut für das aElement weglassen, kann das Element nicht über die tabTastaturnavigation aufgerufen werden. Wenn Sie möchten, dass auf diese Elemente über den tabSchlüssel zugegriffen werden kann, können Sie das tabindexAttribut festlegen oder buttonstattdessen Elemente verwenden. Sie können Schaltflächenelemente einfach so gestalten, dass sie wie normale Links aussehen, wie in der Antwort von Tracker1 erwähnt .

  • Das Weglassen des hrefAttributs für das aElement führt dazu, dass Internet Explorer 6 und Internet Explorer 7 das a:hoverStyling nicht übernehmen . Aus diesem Grund haben wir a.hoverstattdessen einen einfachen JavaScript-Shim hinzugefügt, um dies zu erreichen . Was vollkommen in Ordnung ist, als ob Sie kein href-Attribut und keine anmutige Verschlechterung haben, dann funktioniert Ihr Link sowieso nicht - und Sie haben größere Probleme, über die Sie sich Sorgen machen müssen.

  • Wenn Sie möchten, dass Ihre Aktion weiterhin mit deaktiviertem JavaScript funktioniert, verwenden Sie ein aElement mit einem hrefAttribut, das auf eine URL verweist, die die Aktion manuell ausführt, anstatt über eine Ajax-Anforderung oder was auch immer der richtige Weg sein sollte. Wenn Sie dies tun, möchten Sie sicherstellen, dass Sie event.preventDefault()bei Ihrem Klick einen Aufruf ausführen, um sicherzustellen, dass beim Klicken auf die Schaltfläche nicht der Link folgt. Diese Option wird als würdevolle Verschlechterung bezeichnet.

Balupton
quelle
163
Seien Sie vorsichtig, das Auslassen von href-Attributen ist nicht browserübergreifend kompatibel und Sie verlieren Dinge wie Hover-Effekte im Internet Explorer
Thomas Davis
16
Achtung: Der buttonhier vorgeschlagene Ansatz im Link-Stil wird durch den unvermeidbaren aktiven Zustand "3d" in IE9 und niedriger beeinträchtigt .
Brennan Roberts
44
Ich finde diese Antwort zu dogmatisch. Es gibt Zeiten, in denen Sie das JS-Verhalten nur auf 1 oder 2 a href anwenden möchten. In diesem Fall ist es übertrieben, zusätzliches CSS zu definieren und eine ganze JS-Funktion einzufügen. In einigen Fällen (zB das Hinzufügen von Inhalten über ein CMS) Sie sind eigentlich nicht erlaubt JS neue CSS zu injizieren oder standalone und Inline ist alles , was Sie tun können. Ich sehe nicht, wie die Inline-Lösung in der Praxis für 1 oder 2 einfache JS a href's weniger wartbar ist. Seien Sie immer misstrauisch gegenüber allgemeinen Aussagen zu schlechten Praktiken, einschließlich dieser :)
Jordan Rieger
17
Mit all den "Notizen", die schwer zu lösen sind (das Setzen eines Tabindex erfordert Probleme auf einer komplexen Seite!). Weitaus besser zu tun javascript:void(0). Das ist die pragmatische Antwort und die einzig vernünftige Antwort in der realen Welt.
Abhi Beckert
14
Wenn Sie Ihre Webanwendung zugänglich machen möchten (und sollten), sprechen Einfachheit und Vernunft für href. Der Wahnsinn liegt in Richtung Tabindex.
jkade
328

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

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

Gabe Rogan
quelle
68
Um dies zu vermeiden, geben Sie im onclick-Ereignishandler false zurück.
Guvante
34
Die Rückgabe von false im Ereignishandler vermeidet nicht, dass JS bei JavaScript nicht erfolgreich ausgeführt wird.
Quentin
28
Die Verwendung von "#someNonExistantAnchorName" funktioniert gut, da es keinen Ort gibt, zu dem man springen kann.
Scunliffe
21
Wenn Sie eine Basis href haben, dann #oder #somethingwerden Sie zu diesem Anker nimmt auf der Basis href Seite statt auf der aktuellen Seite.
Abhi Beckert
11
Der shebang ( #!) macht den Trick, aber es ist definitiv eine schlechte Übung.
Neel
276

Ich würde ehrlich gesagt auch nicht vorschlagen. Ich würde ein <button></button>für dieses Verhalten stilisiertes verwenden .

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 ein Skript zu binden und nicht das onclickAttribut auf dem Element-Tag zu verwenden. Das einzige Problem ist der Pseudo-3D-Texteffekt in älteren IEs, der nicht deaktiviert werden kann.


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

  • Wird immer abfangen, falls Ihr Onclick-Ereignis fehlschlägt.
  • Es treten keine fehlerhaften Ladeaufrufe auf oder es werden 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). Vermeiden Sie es, es sei denn, es handelt sich um ein geeignetes Fall-Through-Verhalten, und Sie möchten den Navigationsverlauf ändern.

HINWEIS: Sie können das 0durch eine Zeichenfolge ersetzen, die javascript:void('Delete record 123')als zusätzlicher Indikator dienen kann, der anzeigt, was der Klick tatsächlich bewirkt.

Tracker1
quelle
In IE8 / IE9 kann ich den 1px "3D" -Versatz im aktiven Zustand der Schaltfläche nicht entfernen.
Brennan Roberts
@BrennanRoberts Ja, leider ist das Styling von Schaltflächen mit IE problematischer ... Ich denke immer noch, dass dies wahrscheinlich der am besten geeignete Ansatz ist, nicht dass ich gelegentlich nicht gegen meine eigenen Regeln verstoße.
Tracker1
Dann nicht verwenden, <button>sondern input type=buttonstattdessen?
Patrik Affentranger
4
Verwenden Sie dann ein <clickable>Element. Oder <clickabletim>wenn Sie es vorziehen. Leider kann es für Tastaturbenutzer schwierig sein, das Element zu fokussieren, wenn ein nicht standardmäßiges Tag oder ein einfaches Div verwendet wird.
Joeytiddle
28
Diese Antwort sollte oben sein. Wenn Sie dieses Dilemma haben, brauchen Sie wahrscheinlich tatsächlich ein button. Und IE9 verliert glücklicherweise schnell Marktanteile, und der aktive 1px-Effekt sollte uns nicht daran hindern, semantisches Markup zu verwenden. <a>ist ein Link, der Sie irgendwohin schicken soll, für Aktionen, die wir haben <button>.
mjsarfatti
141

Die erste, idealerweise mit einem echten Link, falls der Benutzer JavaScript deaktiviert hat. Stellen Sie einfach 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 dies folgendermaßen:

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

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

Belter
quelle
19
Führen Sie also in Benutzeragenten mit aktiviertem JavaScript und unterstützter Funktion eine JavaScript-Funktion aus, die (für Benutzeragenten, bei denen die JS aus irgendeinem Grund fehlschlägt) auf einen Link oben auf der Seite zurückgreift. Dies ist selten ein vernünftiger Rückfall.
Quentin
21
"Idealerweise mit einem echten Link, dem zu folgen ist, falls der Benutzer JavaScript deaktiviert hat", sollte eine nützliche Seite angezeigt werden, nicht #, auch wenn dies nur eine Erklärung dafür ist, dass die Site JS benötigt, um zu funktionieren. Wenn dies fehlschlägt, würde ich erwarten, dass der Entwickler vor der Bereitstellung die richtige Erkennung von Browserfunktionen usw. verwendet.
Zach
Ich würde annehmen (hoffen), dass so etwas nur dazu dient, ein Popup oder etwas ähnlich Einfaches zu zeigen. In diesem Fall ist die Standardeinstellung die URL der Popup-Seite. Wenn dies Teil einer Webanwendung ist oder wenn JS deaktiviert wird, wird die Seite vollständig
beschädigt
5
Meine Web-Apps sind so konzipiert, dass sie sich elegant verschlechtern, sodass der Link weiterhin eine nützliche Seite ist. Sofern Ihre Web-App kein Chat-Client oder etwas Interaktives ist, sollte dies funktionieren, wenn Sie sich die Zeit nehmen, um unter Berücksichtigung der Verschlechterung zu entwerfen.
Zach
2
Das Problem ist, wenn myJsFunc einen Fehler auslöst, wird dieser nicht für die Rückgabe false erfasst.
Tracker1
106

Weder wenn du mich fragst;

Wenn Ihr "Link" ausschließlich dazu dient, JavaScript-Code auszuführen, gilt er nicht als Link. eher ein Textstück mit einer daran gekoppelten JavaScript-Funktion. Ich würde empfehlen, eine zu verwenden<span> Tag mit einem onclick handlerangehängten und einigen grundlegenden CSS zu verwenden, um einen Link zu imitieren. Links werden für die Navigation erstellt. Wenn Ihr JavaScript-Code nicht für die Navigation vorgesehen ist, sollte er kein <a>Tag sein.

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>

fijter
quelle
126
Dieser Ansatz beschränkt die Verknüpfung auf eine reine Mausoperation. Ein Anker kann über die Tastatur besucht werden und sein "Onclick" -Ereignis wird ausgelöst, wenn die Eingabetaste gedrückt wird.
AnthonyWJones
40
Das Hardcodieren von Farben in Ihrem CSS würde verhindern, dass der Browser benutzerdefinierte Farben verwendet, die der Benutzer möglicherweise definiert. Dies kann ein Problem bei der Barrierefreiheit sein.
Hosam Aly
30
<span>s sollen nichts tun . <A>nchors und <buttons>werden dafür verwendet!
RedShadow
22
Die Verwendung buttonsist hier eine bessere Wahl, während die Verwendung von a spannicht der Fall ist.
Apnerve
1
Ich denke, eine Spanne ist besser als ein Ankertag. Das Anker-Tag führt Sie zu seinem obligatorischen href-Attribut. Wenn Sie den href nicht verwenden möchten, verwenden Sie keinen Anker. Der Link wird nicht nur auf die Maus beschränkt, da es sich nicht um einen Link handelt. Es hat keine href. Es ist eher wie ein Knopf, aber es wird nicht gepostet. Die Spanne, die nichts tun soll, ist völlig ungültig. Stellen Sie sich ein Dropdown-Menü vor, das beim Bewegen des Mauszeigers aktiviert wird. Es ist wahrscheinlich eine Kombination aus Spannen und Divs, die die Funktion einer Schaltfläche ausführt, die einen Bereich auf dem Bildschirm erweitert.
NibblyPig
97

Idealerweise würden Sie dies 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 onclick-Ereignis nach dem Rendern des DOM unauffällig über JavaScript zum Element hinzufügen, um sicherzustellen, dass Sie es nicht tun, wenn JavaScript nicht vorhanden / verwendet ist Lassen Sie Ihren Code von nutzlosen Ereignishandlern durchsuchen und möglicherweise Ihren tatsächlichen Inhalt verschleiern (oder zumindest davon ablenken).

Steve Paulo
quelle
76

Die Verwendung #macht nur einige lustige Bewegungen, daher würde ich die Verwendung empfehlen, #selfwenn Sie beim Schreiben von sparen möchten JavaScript bla, bla,.

Spammer Joe
quelle
7
WOW, Daumen hoch für diesen Tipp. Ich wusste nie, dass Sie die #selffür benannte Tags verwenden und das nervige Browserverhalten vermeiden können , wenn Sie zum Seitenanfang springen. Vielen Dank.
Alonso.Torres
34
Als Referenz #selfscheint es nichts Besonderes zu sein. Jede Fragmentkennung, die nicht mit dem Namen oder der ID eines Elements im Dokument übereinstimmt (und nicht leer oder "oben" ist), sollte den gleichen Effekt haben.
CHao
1
Normalerweise verwende ich nur einen erfundenen Ankernamen, aber ich denke, ich werde damit beginnen, um in meiner Arbeit konsistent zu sein.
Douglas.Sesar
11
Ich schlug vor, #voidim anderen Kommentar eine Konvention zu etablieren, die aber #selfgenauso kurz und leicht zu merken ist. Alles ist besser als#
jakub.g
6
Aber wenn Sie auf diesen Link klicken, ist es für den Benutzer seltsam, "#void" in der URL zu sehen, sieht aus wie und Fehler oder Fehler, genauso wie #self oder was auch immer.
Pmiranda
68

Ich benutze folgendes

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

stattdessen

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
se_pavel
quelle
2
Ich benutze javascript:(kein Semikolon), weil es in der Statusleiste beim Schweben am saubersten aussieht.
Boann
4
Dieser Code kann im älteren IE böse Überraschungen verursachen. Irgendwann wurden Animationseffekte mit Bildern, einschließlich Rollovers und sogar animierten Gifs,
unterbrochen
Sie können dies immer tun ... javascript:void('Do foo')da void unabhängig davon undefiniert zurückgibt, gibt es dem Benutzer einen Indikator dafür, was das Klicken bewirkt. Wo Do fookann sein Delete record Xoder was auch immer du magst.
Tracker1
53

Ich stimme den Vorschlägen an anderer Stelle zu, wonach Sie die reguläre URL im hrefAttribut verwenden und dann bei einem Klick eine JavaScript-Funktion aufrufen sollten. Der Fehler ist, dass sie return falsenach dem Anruf automatisch hinzufügen .

Das Problem bei diesem Ansatz ist, dass der Link nicht mehr angeklickt werden kann, wenn die Funktion nicht funktioniert oder wenn ein Problem auftritt. Das Onclick-Ereignis wird immer zurückgegebenfalse , sodass die normale URL nicht aufgerufen wird.

Es gibt eine sehr einfache Lösung. Lassen Sie die Funktion zurückkehrentrue wenn sie ordnungsgemäß funktioniert. Verwenden Sie dann den zurückgegebenen Wert, um zu bestimmen, ob der Klick abgebrochen werden soll oder nicht:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Beachten Sie, dass ich das Ergebnis der doSomething()Funktion negiere . Wenn es funktioniert, wird es zurückkehren true, also wird es negiert ( false) und das path/to/some/URLwird nicht aufgerufen. Wenn die Funktion zurückgegeben wird false(z. B. unterstützt der Browser nichts, was in der Funktion verwendet wird, oder wenn etwas anderes schief geht), wird sie negiert trueund path/to/some/URLaufgerufen.

Fczbkk
quelle
50

#ist besser als javascript:anything, aber das Folgende ist noch besser:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Sie sollten immer nach einer angemessenen Verschlechterung streben (für den Fall, dass der Benutzer kein JavaScript aktiviert hat ... und wenn es mit Spezifikationen und Budget ausgestattet ist). Es wird auch als schlechte Form angesehen, JavaScript-Attribute und -Protokolle direkt in HTML zu verwenden.

Justin Johnson
quelle
1
@ Muhd: Rückkehr sollte clickauf Links aktiviert werden ...
Ry-
50

Ich empfehle , mit einem <button>Element statt, vor allem wenn das Steuerelement eine Änderung der Daten bewirken soll. (So ​​etwas wie ein POST.)

Es ist sogar noch besser, wenn Sie die Elemente unauffällig injizieren, eine Art progressive Verbesserung. (Siehe diesen Kommentar .)

behandeln deine Mods gut
quelle
2
Ich denke auch, dass dies die beste Lösung ist. Wenn Sie ein Element haben, das eine Aktion ausführen soll, gibt es keinen Grund dafür, dass es sich um einen Link handelt.
Mateuscb
Würden Sie fragen und Ihre href würde wie "#something" aussehen, könnten einige der anderen aufgelisteten Antworten dienen, aber: Ohne die Verknüpfung der href mit irgendetwas Sinnvollem macht es keinen Sinn, eine href oder sogar einen Link insgesamt zu haben. Die vorgeschlagene Verwendung der Schaltfläche kann ausreichen oder ein anderes Element als einen Link verwenden.
Kontur
1
Ein weiterer Vorteil davon ist, dass Bootstrap .btnSchaltflächen und Links genau gleich aussehen lässt.
Ciro Santilli 法轮功 病毒 审查 六四 事件 19
Fügt aus Benutzersicht buttonauch kein # in die URL ein und zeigt die ahref nicht als Javascript an:;
Coll
39

Sofern Sie den Link nicht mit JavaScript schreiben (damit Sie wissen, dass er im Browser aktiviert ist), sollten Sie idealerweise einen geeigneten Link für Personen bereitstellen, die mit deaktiviertem JavaScript surfen, und dann die Standardaktion des Links in Ihrem Onclick verhindern Event-Handler. Auf diese Weise führen Benutzer mit aktiviertem JavaScript die Funktion aus und Benutzer mit deaktiviertem JavaScript springen zu einer geeigneten Seite (oder Position auf derselben Seite), anstatt nur auf den Link zu klicken und nichts zu tun.

Simon Forrest
quelle
36

Auf jeden Fall ist hash ( #) besser, weil es in JavaScript ein Pseudoschema ist:

  1. verschmutzt die Geschichte
  2. Instanziiert eine neue Kopie der Engine
  3. Läuft im globalen Bereich und respektiert das Ereignissystem nicht.

Natürlich ist "#" mit einem Onclick-Handler, der Standardaktionen verhindert, [viel] besser. Darüber hinaus ist ein Link, der ausschließlich dazu dient, JavaScript auszuführen, nicht wirklich "ein Link", es sei denn, Sie senden einen Benutzer an einen vernünftigen Anker auf der Seite (nur # wird nach oben gesendet), wenn etwas schief geht. Sie können einfach das Erscheinungsbild der Verknüpfung mit dem Stylesheet simulieren und href überhaupt vergessen.

In Bezug auf den Vorschlag von Cowgod, insbesondere dies: ...href="javascript_required.html" onclick="...Dies ist ein guter Ansatz, unterscheidet jedoch nicht zwischen den Szenarien "JavaScript deaktiviert" und "Onclick schlägt fehl".

kostenlose Beratung
quelle
1
@Berker Yüceer, warum CW?
Kostenlose Beratung
30

Ich gehe normalerweise für

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

Es ist kürzer als Javascript: void (0) und macht dasselbe.

dnetix
quelle
27

Ich würde ... benutzen:

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

Gründe dafür:

  1. Dies macht die hrefeinfachen Suchmaschinen es brauchen. Wenn Sie etwas anderes verwenden (z. B. eine Zeichenfolge), kann dies dazu führen, dass a404 not found Fehler führen.
  2. Wenn Sie mit der Maus über den Link fahren, wird nicht angezeigt, dass es sich um ein Skript handelt.
  3. Bei Verwendung return false;springt die Seite nicht nach oben oder bricht die backSchaltfläche.
Eric Yin
quelle
Ich stimme nicht mit "1" überein. weil es Fehler gibt, wenn Sie Ihren Skript-Link setzen, wenn Skripte nicht erlaubt sind. Daher sollte diese Art von Links mit dem js-Code hinzugefügt werden. Auf diese Weise können Benutzer diese Links vermeiden, während das Skript nicht zulässig ist, und es werden überhaupt keine Fehler angezeigt.
Berker Yüceer
25

Ich wähle "Verwenden" javascript:void(0), da dies das Klicken mit der rechten Maustaste verhindern könnte, um das Inhaltsmenü zu öffnen. Ist javascript:;aber kürzer und macht das gleiche.

564706
quelle
24

Also, wenn Sie einige JavaScript Dinge mit tun <a />Tag und wenn Sie setzen href="#"auch, können Sie hinzufügen return false am Ende der Veranstaltung (im Fall von Inline - Ereignisbindung) wie:

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

Oder Sie können das href- Attribut mit JavaScript wie folgt ändern :

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

oder

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

Aber semantisch sind alle oben genannten Wege, um dies zu erreichen, falsch (es funktioniert jedoch gut) . Wenn kein Element zum Navigieren auf der Seite erstellt wurde und mit dem einige JavaScript-Elemente verknüpft sind, sollte es kein Element sein<a> Tag sein.

Sie können <button />stattdessen einfach a verwenden, um Dinge oder andere Elemente wie b, span oder was auch immer nach Ihren Wünschen zu tun, zu tun, da Sie Ereignisse zu allen Elementen hinzufügen dürfen.


So gibt es einen Vorteil zu nutzen <a href="#">. Sie erhalten dabei standardmäßig den Cursorzeiger für dieses Element a href="#". Dafür denke ich, dass Sie CSS dafür verwenden können, cursor:pointer;was auch dieses Problem löst.

Und am Ende, wenn Sie das Ereignis aus dem JavaScript-Code selbst binden, können Sie dies tun event.preventDefault(), wenn Sie ein <a>Tag verwenden. Wenn Sie jedoch kein <a>Tag dafür verwenden, erhalten Sie einen Vorteil, den Sie nicht haben. Ich muss das nicht tun.

Wenn Sie sehen, ist es besser, kein Tag für solche Dinge zu verwenden.

Ashish Kumar
quelle
23

Verwenden Sie Links nicht ausschließlich zum Ausführen von JavaScript.

Bei Verwendung von href = "#" wird die Seite nach oben verschoben. Die Verwendung von void (0) führt zu Navigationsproblemen im Browser.

Verwenden Sie stattdessen ein anderes Element als einen Link:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

Und gestalten Sie es mit CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
Garrett
quelle
13
Verwenden Sie eine Schaltfläche, keine Spanne. Die Tasten fallen natürlich in die Fokusreihenfolge und können ohne Maus / Trackpad / usw. aufgerufen werden.
Quentin
4
Hinzufügen von Ton Quentins Kommentar: Wie derzeit geschrieben, erreichen Tastaturbenutzer das spanElement nicht, da es sich um ein nicht fokussierbares Element handelt. Deshalb brauchen Sie einen Knopf.
Tsundoku
1
Sie können es fokussierbar machen, indem Sie tabindex="0"es der Spanne hinzufügen . Die Verwendung der Schaltfläche ist jedoch besser, da Sie die gewünschte Funktionalität kostenlos erhalten. Um den Zugriff über einen Bereich zu ermöglichen, müssen Sie nicht nur einen Klick-Handler anhängen, sondern auch einen Tastatur-Event-Handler, der nach Drücken der Leertaste oder Eingabetaste sucht und dann den normalen Klick-Handler auslöst. Sie möchten auch den zweiten CSS-Selektor .funcActuator:hover, .funcActuator:focusso ändern, dass die Tatsache, dass das Element den Fokus hat, offensichtlich ist.
Nutzloser Code
22

Es wäre besser, jQuery zu verwenden.

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

und lassen Sie beide href="#"und weghref="javascript:void(0)" .

Das Anker-Tag-Markup ist wie folgt

<a onclick="hello()">Hello</a>

Einfach genug!

naveen
quelle
5
Das wollte ich sagen. Wenn ein Link eine sinnvolle Fallback-URL hat, verwenden Sie diese. Andernfalls lassen Sie einfach die href weg oder verwenden Sie etwas semantisch angemesseneres als ein <a>. Wenn der einzige Grund, den alle befürworten, einschließlich der href, darin besteht, den Finger auf den Schwebeflug zu setzen, reicht ein einfaches "a {cursor: pointer;}" aus.
Matt Kantor
12
Das gibt schreckliche Zugänglichkeit. Versuchen Sie es in SO: Sie können einen Beitrag nicht markieren, ohne die Maus zu verwenden. Auf die Links "Link" und "Bearbeiten" kann durch Tabulieren zugegriffen werden, "Flag" jedoch nicht.
Nicolás
6
Ich stimme dieser Option zu. Wenn der Anker keinen anderen Zweck als JavaScript hat, sollte er keine href haben. @Fatih: Die Verwendung von jQuery bedeutet, dass der Link KEINEN Zeiger hat, wenn JavaScript deaktiviert ist.
Scott Rippey
3
Wenn Sie diesen Weg gehen, warum binden Sie den Klick nicht auch mit jQuery? Ein Teil der großartigen Sache bei der Verwendung von jQuery ist die Möglichkeit, Ihr Javascript von Ihrem Markup zu trennen.
Muhd
4
Ich kann nicht glauben, dass diese Antwort 11 Stimmen hat. Es ist schrecklich. Warum fügen Sie einen Stil über Javascript (und jQuery ??) hinzu und definieren dann Ihre Onclick-Aktion in HTML? Schrecklich.
MMM
20

Wenn Sie AngularJS verwenden , können Sie Folgendes verwenden:

<a href="">Do some fancy JavaScript</a>

Welches wird nichts tun.

In Ergänzung

  • Sie gelangen nicht wie bei (#) an den Anfang der Seite.
    • Daher müssen Sie nicht explizit falsemit JavaScript zurückkehren
  • Es ist kurz und prägnant
Whirlwin
quelle
6
Dies würde jedoch dazu führen, dass die Seite neu geladen wird. Da wir zum Ändern der Seite immer Javascript verwenden, ist dies nicht akzeptabel.
Henry Hu
@ HenryHu Ich habe herausgefunden, dass der Grund, warum es nicht neu geladen wurde, AngularJS war. Siehe meine aktualisierte Antwort.
Whirlwin
19

Wenn dies nicht der hrefFall ist, gibt es möglicherweise keinen Grund, ein Ankertag zu verwenden.

Sie können fast jedem Element Ereignisse (Klicken, Schweben usw.) hinzufügen. Warum also nicht einfach ein spanoder ein verwenden div?

Und für Benutzer mit deaktiviertem JavaScript: Wenn es keinen Fallback gibt (z. B. eine Alternative href), sollten sie dieses Element zumindest überhaupt nicht sehen und damit interagieren können, unabhängig davon, ob es sich um ein <a>oder ein <span>Tag handelt.

achairapart
quelle
19

Normalerweise sollten Sie immer einen Fallback-Link haben, um sicherzustellen, dass Clients mit deaktiviertem JavaScript noch einige Funktionen haben. Dieses Konzept wird als unauffälliges JavaScript bezeichnet.

Beispiel ... Angenommen, Sie haben den folgenden Suchlink:

<a href="search.php" id="searchLink">Search</a>

Sie können immer Folgendes tun:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Auf diese Weise werden Personen mit deaktiviertem JavaScript angesprochen, search.phpwährend Ihre Betrachter mit JavaScript Ihre erweiterten Funktionen anzeigen.

Andrew Moore
quelle
17

Ich persönlich benutze sie in Kombination. Zum Beispiel:

HTML

<a href="#">Link</a>

mit ein bisschen jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

oder

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Aber ich benutze das nur, um zu verhindern, dass die Seite nach oben springt, wenn der Benutzer auf einen leeren Anker klickt. Ich benutze selten onClick und andereon Ereignisse direkt in HTML.

Mein Vorschlag wäre, ein <span>Element mit dem classAttribut anstelle eines Ankers zu verwenden. Zum Beispiel:

<span class="link">Link</span>

Weisen Sie die Funktion dann .linkmit einem Skript zu, das in den Textkörper und kurz vor dem </body>Tag oder in ein externes JavaScript-Dokument eingeschlossen ist.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Hinweis: Verwenden Sie für dynamisch erstellte Elemente:

$('.link').on('click', function() {
    // do something
});

Verwenden Sie für dynamisch erstellte Elemente, die mit dynamisch erstellten Elementen erstellt werden, Folgendes:

$(document).on('click','.link', function() {
    // do something
});

Anschließend können Sie das span-Element so gestalten, dass es mit ein wenig CSS wie ein Anker aussieht:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Hier ist ein jsFiddle- Beispiel von oben.

mdesdev
quelle
16

Je nachdem, was Sie erreichen möchten, können Sie den Onclick vergessen und einfach die href verwenden:

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

Es geht um die Notwendigkeit, false zurückzugeben. Ich mag die #Option nicht, weil sie, wie erwähnt, den Benutzer an den Anfang der Seite bringt. Wenn Sie den Benutzer an einen anderen Ort senden müssen, wenn JavaScript nicht aktiviert ist (was bei mir selten vorkommt, aber eine sehr gute Idee ist), funktioniert die von Steve vorgeschlagene Methode hervorragend.

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

Zuletzt können Sie verwenden, javascript:void(0)wenn Sie nicht möchten, dass jemand irgendwohin geht, und wenn Sie keine JavaScript-Funktion aufrufen möchten. Es funktioniert hervorragend, wenn Sie ein Bild haben, mit dem ein Mouseover-Ereignis stattfinden soll, auf das der Benutzer jedoch nicht klicken kann.

lesen
quelle
3
Der einzige Nachteil dabei (aus dem Gedächtnis heraus kann ich mich irren) ist, dass der IE ein A nicht als A betrachtet, wenn Sie kein href darin haben. (Also CSS-Regeln funktionieren nicht)
Benjol
16

Wenn ich mehrere Faux-Links habe, gebe ich ihnen lieber eine Klasse von "No-Link".

Dann füge ich in jQuery den folgenden Code hinzu:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

Und für den HTML-Code ist der Link einfach

<a href="/" class="no-link">Faux-Link</a>

Ich mag es nicht, Hash-Tags zu verwenden, es sei denn, sie werden für Anker verwendet, und ich mache das oben genannte nur, wenn ich mehr als zwei Faux-Links habe, sonst gehe ich mit Javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Normalerweise vermeide ich es, überhaupt keinen Link zu verwenden, und wickle einfach etwas in einen Zeitraum ein und verwende dies, um JavaScript-Code wie ein Popup oder eine Inhaltsoffenbarung zu aktivieren.

Stapel auf Stapel auf Stapel
quelle
16

Ich glaube, Sie präsentieren eine falsche Zweiteilung. Dies sind nicht die einzigen beiden Optionen.

Ich stimme Herrn D4V360 zu, der vorgeschlagen hat, dass Sie, obwohl Sie das Ankertag verwenden, hier keinen wirklichen Anker haben. Alles, was Sie haben, ist ein spezieller Abschnitt eines Dokuments, der sich etwas anders verhalten sollte. Ein <span>Tag ist weitaus geeigneter.

Clever Human
quelle
Auch wenn Sie ein adurch ein ersetzen spanmöchten, müssen Sie daran denken, es über die Tastatur fokussierbar zu machen.
AndFisher
16

Ich habe beide in Google Chrome mit den Entwicklertools ausprobiert, und das id="#"dauerte 0,32 Sekunden. Während die javascript:void(0)Methode nur 0,18 Sekunden dauerte. Also in Google Chrome, javascript:void(0)funktioniert besser und schneller.

Benutzer6460587
quelle
Eigentlich machen sie nicht dasselbe. # bringt Sie zum Anfang der Seite.
Jochen Schultz
13

Grundsätzlich paraphrasiere ich diesen praktischen Artikel mit progressiver Verbesserung . Die kurze Antwort lautet, dass Sie niemals verwenden javascript:void(0);oder es #sei denn, Ihre Benutzeroberfläche hat bereits gefolgert, dass JavaScript aktiviert ist. In diesem Fall sollten Sie verwendenjavascript:void(0); . Verwenden Sie span auch nicht als Links, da dies zunächst semantisch falsch ist.

Die Verwendung von SEO- freundlichen URL-Routen in Ihrer Anwendung, wie z. B. / Home / Action / Parameters, ist ebenfalls eine gute Vorgehensweise. Wenn Sie einen Link zu einer Seite haben, die zuerst ohne JavaScript funktioniert, können Sie die Erfahrung danach verbessern. Verwenden Sie einen echten Link zu einer Arbeitsseite und fügen Sie dann ein Onlick-Ereignis hinzu, um die Präsentation zu verbessern.

Hier ist ein Beispiel. Home / ChangePicture ist ein funktionierender Link zu einem Formular auf einer Seite mit Benutzeroberfläche und Standard-HTML-Senden-Schaltflächen. Es sieht jedoch besser aus, wenn es in einen modalen Dialog mit jQueryUI-Schaltflächen eingefügt wird. In beiden Fällen funktioniert dies je nach Browser, der die erste mobile Entwicklung erfüllt.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>
Josh Simerman
quelle
In Bezug auf SEO würde ich diesen Weg bevorzugen. Wenn Sie so viele freundliche URLs verwenden, wird der Seitenwertfaktor definitiv verbessert.
Chetabahana