Läuft man einem Javascript-Link in freier Wildbahn über den Weg, ist die Wahrscheinlichkeit sehr hoch, dass dieser in etwa die Form <a onclick="tolle_funktion()" href="#">
hat. Warum nur!
Es scheint so, als würden Leute dies tun, weil sie nichts besseres haben, das sie den Link referenzieren lassen können. Sie benutzen das Rautezeichen quasi als Ersatz für nichts. Dass das recht wenig Sinn ergibt, versteht sich von selbst. Warum die Raute nehmen, wenn es auch gleich sein lassen könnte? Ich glaube das ist eine dieser seltsamen Traditionen als grauer Frontpage-Zeit, genau wie auch die Verwendung von
als normales Leerzeichen.
Statt Rautezeichen oder gar nichts gehört in das href-Attribut eines Links eine schöne URL, mit der man dem User möglichst genau das serviert, was auch die Javascript-Funktion zu bieten hat. Dann kommen nämlich auch jene, die kein Javascript zur Hand haben, in den Genuss der hinter dem Link verborgenen Informationen. Außerdem interpretieren Browser href="#"
als Sprunglink zum Seitenanfang. Das will man doch wirklich nur in Ausnahmefällen.
Es gibt also keinen Grund, warum das href-Attribut eines Links jemals # sein sollte. Besser:
<a href="/ersatz-url/index.html" onclick="return tolle_funktion()">
Wenn man auf diesen Link klickt, und tolle_funktion()
läuft wie sie soll, gibt sie (ordentliche Programmierung vorausgesetzt) false zurück und der Link ruft die url in href
nicht auf. Wenn aber die Funktion auf Probleme stößt, wird nichts bzw. true zurückgegeben und der Benutzer landet bei der Ersatz-URL. Eine Testseite zur Demonstration steht bereit.
Wenn man das alles haben kann, warum noch zur Raute greifen?
Nachtrag vom Februar 2012: wie man Javascript-URLs für moderne Webapps mit HTML5 umsetzt, erklärt dieser Artikel.
Kommentare (34)
metax. ¶
15. Dezember 2007, 09:31 Uhr
Was mir spontan auf der Testseite aufgefallen ist:
Der #-Link wird nach einem Klick als "visited" angezeigt, wogegen der andere Link mit echtem Ziel so lange "unvisited" bleibt, bis man mal ohne Javascriopt draufklickt.
Es gibt übrigens noch eine dritte Möglichkeit:
<a href="javascript:tollefunktion();"></a>
Wie schaut es damit aus?
Natürlich fehlt hier die redundante Seite, auf der dem Nicht-Javascript-Benutzer ein Ersatz angezeigt wird.
Aber ist das technisch korrekt, oder auch nur ein Frontpage-Konstrukt?
Christian ¶
15. Dezember 2007, 09:46 Uhr
Für mich stellt sich da die Frage: Was machen mit Links die keine URL-Funktion haben?
Meinetwegen habe ich einen Link der einen bestimmten Bereich auf der Webseite verschwinden lassen soll. Was sollte man denn hier ins href aufnehmen? Ich meine in diesem Fall wäre es wohl Sinnvoll den Link für Leute ohne JS einfach ausblenden zu lassen, aber selbst dann, was soll ins href solange es keine bestimmte Ajax-Funktionalität hat die man irgendwie auch rein Serverseitig nachbilden könnte?
Peter ¶
15. Dezember 2007, 10:07 Uhr
Zitat metax.:
Och, technisch korrekt ist auch
href="#"
. Es ist nur eben nicht besonders sinnvoll. Wenn man die Chance auf eine Alternativ-URL schon hat, sollte man das nutzen, selbst wenn es nur zu einer »Mach gefälligst Javascript an!«-Meldung führt. Alles ist besser als eine stillschweigende Funktionsstörung.Zitat Christian:
Wenn kein Javascript da ist, den Link ausblenden. Und auf jeden Fall kein
#
reinsetzen, es sei denn du brauchst eine Sprungmarke zum Seitenanfang. Weil sonst ist das zu nichts gut.Christian ¶
16. Dezember 2007, 18:40 Uhr
Mhm ok, also für Non-JS-User ausblenden ist klar, aber auf was soll ich denn dann für die JS-User das href pointen? Natürlich kann man alternativ wie von dir gesagt alle Links auf eine "mach-js-an.html" verlinken und Leute ohne JS bekommen dann die jeweilige Meldung, aber für rein kosmetische Anwendungen fällt mir gerade keine funktionelle alternative ein.
Aber du hast schon Recht, die Raute ist auch nicht das richtige.
Peter ¶
16. Dezember 2007, 18:44 Uhr
In dem Fall der rein kosmetischen Anwendung würde ich mal die Frage in den Raum werfen, ob das anklickbare Ding in diesem Fall überhaupt ein Link (also
<a>
) sein sollte. Mir fällt spontan nichts ein, was zwingend dafür sprechen würde.euro ¶
13. August 2008, 10:04 Uhr
das ist ganz einfach:
<a href="void(0)" rel="nofollow">
damit braucht man das # nicht zu setzen (es passiert einfach gar nichts), und man kann die Funktion nutzen, egal ob sie nun eine neue Seite öffnet, weiterleitet, oder ein Element auf der momentanen Seite toggelt.
Außerdem hat es oftmals seine Gründe, warum man <a> tags benutzt.
teilweise verstehen ältere browser bei anderen elementen als bei <a> die :hover (etc.) css-anweisungen nicht. man möchte diesen link aber in der selben "css art" halten, wie den rest der "echten" Links
deshalb sollte man hier auch konsequenter weise bei <a> bleiben.
euro
euro ¶
13. August 2008, 10:06 Uhr
was is das bitte für ein Blog???
hier lassen sich ja specialchars einbauen - warum werden die nicht mit htmlspecialchars() gesichert?
diese seite ist ja echt mal problematisch...
';alert(String.fromCharCode(88,83,83))//\';alert(String.fromCharCode(88,83,83))//";alert(String.fromCharCode(88,83,83))//\";alert(String.fromCharCode(88,83,83))//-->">'>alert(String.fromCharCode(88,83,83))
Peter ¶
13. August 2008, 13:51 Uhr
Zitat euro:
Wo ist denn hier ein Problem?
euro ¶
13. August 2008, 16:29 Uhr
:) jetzt gibts keins mehr
irgendjemand hat meinen eintrag "nachgebessert" von hand.
mir solls egal sein - aber man könnte sich mein tipp ja zu herzen nehmen^^
gruß euro
Peter ¶
13. August 2008, 16:32 Uhr
Zitat euro:
Nene, mit meinem Blog ist alles in Ordnung. Du hattest nur leider unter dem Kommentarfeld Punkt 3 der Hinweise übersehen.
euro ¶
13. August 2008, 16:37 Uhr
jepp
aber um genau das problem dass man anstatt diesen zeichen (hallo? da würde man ja blöd werden, wenn man beispiele mit den beiden zeichen die ich nun nicht schreiben darf, postet) die "originalen" verwendet,
solltest du dich eher kümmern, anstatt hier über # oder nicht # zu diskutieren^^
meine meinung
Peter ¶
13. August 2008, 17:04 Uhr
Naja, in den letzten zwei Jahren ist das so ganz gut gelaufen, da denke ich mal, das lasse ich so.
Thomas Schmidt ¶
11. Oktober 2008, 14:46 Uhr
Ich brauche gerade ein Element, das sich beim Anklicken verändert. Also eine reine Sache in CSS: a:active {}
Es gibt für das A-Element keine Alternative. Es ist aber auch kein Link, der irgendwo hinführt. Was soll ich jetzt bei href schreiben?
Thomas
Peter ¶
11. Oktober 2008, 14:55 Uhr
Zitat Thomas Schmidt:
Sicher gibt es das!
HTML:
Javascript (Pseudocode)
mieper ¶
12. Februar 2009, 23:23 Uhr
und was soll man machen wenn man kein alert haben will?
Sowas wie
function miep {
if (var miep= "miep")
return true
else
return false
klappt nicht... irgendeine Idee?
Tobi ¶
17. Februar 2009, 10:06 Uhr
Zitat Peter:
Dann funktioniert aber, wie gesagt, :hover nicht mehr! Und JS fürs Design zu benutzen, empfinde ich als größere Vergewaltigung, als ein href="#".
Peter ¶
17. Februar 2009, 10:52 Uhr
Zitat Tobi:
Nur im IE6 funktioniert das nicht. Und der ist am Aussterben.
Philipp ¶
28. Februar 2009, 22:22 Uhr
Zitat Peter:
Programmierer, die sich nicht darum kümmern, dass eine Seite möglichst überall korrekt angezeigt wird, leider nicht ;-)
Naja, wenn man Besucher vergraulen will, bitte sehr.
P.S. es gibt genug Leute, die nicht wechseln *können* (Firmenrechner z.B.).
Peter ¶
28. Februar 2009, 22:30 Uhr
Wenn deinee Hover-Effekte so elementar wichtig sind, dass ohne sie deine Seite komplett dem Untergang geweiht ist, nimmst du halt ein HTC-Script. Nur ich glaube wirklich nicht, dass man das in der Regel machen muss.
PeterK. ¶
24. Juni 2009, 10:22 Uhr
Zitat Peter:
Mehr muss man dazu ja nicht sagen. Zeigt die Sinnhaftigkeit dieses Artikels. Ist ungefähr genauso relevant wie die Frage warum Zeitungen oftmals nicht vollständig in den Briefkasten gesteckt werden, obwohl doch Platz wäre. Aber viele Zeitungsausträger lassen einfach ein Stück rausschauen...
rappit ¶
6. Juli 2009, 07:24 Uhr
funktioniert meiner Meinung nach am Besten ;)
rappit ¶
6. Juli 2009, 07:25 Uhr
jetzt gehts:
Gero ¶
3. Februar 2012, 17:33 Uhr
Ich gehe mal Leichen fleddern und exhumiere diesen Thread:
Es geht natürlich um einen Link, der in einer JavaScript-Applikation Sinn macht, aber keinen Alternativ-Link hat. Das heißt: Die Überprüfung, ob JavaScript verfügbar ist, ist längst geschehen.
Was spricht dagegen, den Link wie folgt anzulegen?
<a class="textlink" id="meinlink">[Mein Link]</a>
Also vollkommen ohne href. Anschließend dann per CSS ein link-artiges Rollover anbauen:
a.textlink { cursor:pointer; color:#00f; }
a.textlink:hover { text-decoration:underline; }
Und dann, die eigentliche Funktionalität, per JavaScript dranbauen - z.B. per jQuery:
$("#meinlink").click(function() { alert("foo"); });
Macht das Sinn, oder ist das Humbug?
Peter Kröner ¶
3. Februar 2012, 17:51 Uhr
Mann kann es so machen. Semantisch gesehen ist das möglicherweise nicht ganz eindeutig das richtigste was machen machen könnte …
… aber ich würde sagen das passt schon wenn es eine JS-Webapp ist. Sinnvoller als ein
span
-Element oder so ist es allemalPeter Kröner ¶
3. Februar 2012, 17:54 Uhr
Wobei, eine bessere Alternative fällt mir dann doch ein: History API! Damit kannst du sozusagen virtuelle URLs erstellen, die als
href
verwenden und dann über History-Events JS-Aktionen ausführen lassen.Gero ¶
3. Februar 2012, 17:58 Uhr
Nochmal. :-) Was soll ich machen?
History-API und DOM-Zugriff auf window.history gut und schön - aber damit habe ich immer noch nichts, was ich ins href="..." schreiben soll.
Mit dem unsterblichen Dieter Hallervorden in "Didi – Der Doppelgänger": "Ich brauche mehr Details." ;-)
Peter Kröner ¶
3. Februar 2012, 20:49 Uhr
Klar hast du was für das
href
. Ist aber vielleicht nicht ganz so trivial zu erklären wie ich zunächst dachte … ich glaube ich sollte das mal in einen ausführlicheren Artikel verpacken. Mache ich nächste Woche, ok?Gero ¶
6. Februar 2012, 09:42 Uhr
Na klar, gern. :-)
zibbl ¶
8. Februar 2012, 10:57 Uhr
zibbl ¶
9. Februar 2012, 03:27 Uhr
Und, sorry, das auch noch: Das innere "a name" muss *vor* das äußere "a link".
Luxi ¶
6. Juli 2012, 03:28 Uhr
Das Thema ist zwar schon sehr alt und ich wurde gewarnt, dass niemand antwortet, aber es hat mich gerade interessiert und ich möchte meinen Senf dazugeben, da m.E. eine Unkorrektheit da drin ist.
Oben seht:
Es ist m.E. genau anders herum: Wenn die Funktion false zurückgibt, wird der Ersatzlink nicht aufgerufen.
Auf http://de.selfhtml.org/javascript/objekte/window.htm#alert steht:
Man sieht das übrigens sehr gut, wenn man Dein Script wie folgt erweitert:
Dein Beispiel gibt also false zurück und nur deshalb funktionierts!
Ich habe für einen bestimmten Zweck genau so etwas gesucht: Der User soll den Link genau der Seite sehen, die sich dann tatsächlich öffnet. Per Javascript werden allerdings ein paar PHP-Parameter drangehangen die er nicht sieht. Falls er auf die Idee kommt, den Link mit der rechten Maustaste in einem neuen Fenster anzeigen zu lassen, landet er trotzdem auf der richtigen Seite (es fehlen dann halt die paar Parameter).
Mit Deiner Methode lässt sich das bewerkstelligen, allerdings nur wenn die Funktion false zurückgibt.
Da ich in meinem Fall keine Dialogbox (alert) drinhaben wollte und mein Script immer mit return true; endete, konnte es nicht funktionieren.
Trotz dieser Hürde hat mich Dein Beitrag auf die richtige Spur zur Lösung meines Problems gebracht.
Thx
G. Stephan ¶
31. Dezember 2012, 16:35 Uhr
Hier hat Luxi definitiv Recht: Es ist umgekehrt: Nur wenn false zurückgeben wird, wird das href Attribut außer Kraft gesetzt.
Da dieser Blog-Beitrag nach wie vor über Google-Suche angezeigt wird, wäre es wünschenswert, wenn diese falsche Aussage korrigiert werden würde.
Peter Kröner ¶
31. Dezember 2012, 17:16 Uhr
Korrigiert.
saddsa ¶
22. April 2015, 15:42 Uhr
dadads.....toll deaktiviert