Die Welt zwischen uns.
-
-
HTML/JQuery: Links ohne Weiterleitung
Heute möchte ich ein Geheimnis des Webentwickelns bekannt geben, dem ich schon fast Jahre hinterher jage. Es geht dabei um Folgendes: Wenn man auf einen Link klickt, dann wird man auf eine neue Seite weitergeleitet. Das erkennt man im Browser daran, dass unten eine Adresse (z.B. http://www.example.com) erscheint, wenn man mit der Maus über den Link fährt. Jetzt wird einigen aufgefallen sein, dass dort auch manchmal
javascript:void(0);steht, womit ein Javascript ausgelöst wird. Hat man Javascript aber deaktiviert, führt der Link nirgendwo hin. Also hab ich eine dritte Alternative gesehen: Man hat einen vollständigen Link und dazu ein Javascript, was ausgeführt wird. Da ich lieber mit JQuery programmiere als mit einfachem JavaScript gibt es hier die Möglichkeit die Weiterleitung sehr einfach zu unterdrücken:HTML:
<a href="http://www.example.com">Mein Link</a>JQuery Code:
$('a').click(function(event) {
event.preventDefault();
// Hier kann weiterer Code ausgeführt werden});Durch event.preventDefault(); wird also der Browser daran gehindert, einen neuen Tab für den Link zu öffnen bzw. weiterzuleiten. Ein Beispiel dafür ist übrigens der orangene Teilen-Button am Ende dieses Beitrags, probiert es aus!
Für weitere Informationen dazu empfehle ich die jQuery Dokumentation zu dem Thema.