Links - konsistent mit und ohne Javascript

[Richard-Zillmann]

Hallo,

ich habe eine Linkleiste als Tabelle implementiert. Dabei habe ich mit Javascript jeweils die ganze Tabellenzelle sensitiv gemacht (sowohl Farbe mit onmouseover als auch der Klick mit onclick). Das Ganze soll aber auch mit abgeschaltetem Javascript funktionieren, deshalb habe ich die <a>-Tags auch noch drin.
Das funktioniert zwar schon, aber wenn ich jetzt auf den Mail-Link (auf das <a>-Tag) klicke, kriege ich 2 Mailtools geöffnet. Das ist zwar irgendwie logisch, aber nicht das was ich gern hätte. Ich habe jetzt versucht, eine Javascript-Funktion zu schreiben, die onload das <a> entfernt, aber den Text des <a> dalässt. Leider ist es mir nicht gelungen.

Also meine Frage: wie schafft es ein Profi, dass so ein Link mit und ohne Javascript konsistent funktioniert?

Für einen entsprechenden Hinweis wäre ich sehr dankbar

Richard

[Aikidoka]

Hallo!
Schreibe hinter dein onclick ein return false. Das löst dein Problem. Also in etwa so:

onclick="Bla();return false"

Und du kennst CSS? Weil damit wäre das mit onmouseover und onclick sehr viel einfacher und besser zu lösen...

gruß, aikidoka

[Richard-Zillmann]

Hallo!
Schreibe hinter dein onclick ein return false. Das löst dein Problem. Also in etwa so:

onclick="Bla();return false"

Und du kennst CSS? Weil damit wäre das mit onmouseover und onclick sehr viel einfacher und besser zu lösen...

gruß, aikidoka

Danke für den prompten Tip.
Mit CSS habe ich das Problem, dass ich nicht nur die Fläche des <a>-Textes, sondern die ganze Fläche der Tabellenzelle sensitiv haben will. Das habe ich nur mit onclick="javascript..." geschafft.

Viele Grüße

Richard

[Aikidoka]

Hallo!
Bitte. Ich glaube ab XHTML 2 darf der a-Tag auch andere HTML-Elemente enthalten. Aber sicher bin ich mir auch nicht...
gruß, aikidoka

[Mathias Brodala]

Hallo Aikidoka.

Bitte. Ich glaube ab XHTML 2 darf der a-Tag auch andere HTML-Elemente enthalten. Aber sicher bin ich mir auch nicht...

Zu Recht, es stimmt nämlich nicht. Das a-Element hat in diesem Sprachdialekt aufgrund der Tatsache, dass jedes Element Quelle eines Links sein kann, nur noch historischen Wert. Eine ungültige Verschachtelung ist aber nach wie vor nicht korrekt.

Einen schönen Freitag noch.

Gruß, Mathias

[steckl]

Hi,

ich habe eine Linkleiste als Tabelle implementiert. Dabei habe ich mit Javascript jeweils die ganze Tabellenzelle sensitiv gemacht (sowohl Farbe mit onmouseover als auch der Klick mit onclick). Das Ganze soll aber auch mit abgeschaltetem Javascript funktionieren, deshalb habe ich die <a>-Tags auch noch drin.

Das geht doch auch mit CSS, dann kannst du dir das Script sparen. siehe zum Beispiel selfhtml.
mfG,
steckl

[Richard-Zillmann]

Das geht doch auch mit CSS, dann kannst du dir das Script sparen. siehe zum Beispiel selfhtml.
mfG,
steckl

Der Grund war, dass ich die ganze Zellen-Fläche (und nicht nur die <a>-Fläche) sensitiv habe wollte. Das habe ich mit CSS nicht geschafft.

Aber der Tip "return false;" löst das Problem

besten Dank

Richard

[Struppi]

Der Grund war, dass ich die ganze Zellen-Fläche (und nicht nur die <a>-Fläche) sensitiv habe wollte. Das habe ich mit CSS nicht geschafft.

ist aber keine Problem.
und besser als eine Tabelle, eignet sich für sowas eine Liste schau dir mal die Beispiele hier an http://css.maxdesign.com.au/ Listamatic 1 & 2

Struppi.

[JürgenB]

Hallo Richard,

Also meine Frage: wie schafft es ein Profi, dass so ein Link mit und ohne Javascript konsistent funktioniert?

<a href="seite.html" onclick="tuwas(this);return false">Link</a>

Das "return false" sorgt dafür, dass der Link nicht ausgeführt wird. Der Übergabeparameter this übergibt eine Referenz auf den (diesen) Link. In der Funktion tuwas kann dann z.B. auf parameter.href, also das Linkziel, zugegriffen werden.

function tuwas(parameter) { alert(parameter.href); }

Ohne Javascript kein return und dann kommt der Link. Superprofis prüfen in der Onklick-Funktion noch, ob das gewünschte geklappt hat und returnen dann true oder false, im "a" steht dann onclick="return tuwas(this)".

Gruß, Jürgen

[Richard-Zillmann]

<a href="seite.html" onclick="tuwas(this);return false">Link</a>

Das "return false" sorgt dafür, dass der Link nicht ausgeführt wird. Der Übergabeparameter this übergibt eine Referenz auf den (diesen) Link. In der Funktion tuwas kann dann z.B. auf parameter.href, also das Linkziel, zugegriffen werden.

function tuwas(parameter) { alert(parameter.href); }

Ohne Javascript kein return und dann kommt der Link. Superprofis prüfen in der Onklick-Funktion noch, ob das gewünschte geklappt hat und returnen dann true oder false, im "a" steht dann onclick="return tuwas(this)".

Gruß, Jürgen

Klasse, besten Dank, das habe ich gesucht

Richard

[Cybaer]

Hi,

Klasse, besten Dank, das habe ich gesucht

Äh, nein, ein Superprofi macht das bestimmt nicht so.

Wenn man die Beschreibung der Ausgangssituation und JürgenBs Vorschlag abgleicht, dann tun sich da Lücken/Probleme/Fehler auf. D.h., ein Superprofi würde das keinesfalls so lösen.

JürgenBs Lösung ist korrekt, wenn man sie nur auf *einen* Link mit gleichzeitiger HTML- & JS-Funktionalität bezieht.

Dein Problem ist aber (zusätzlich) das "Event-Bubbling" (*mehrere* Links, die übereinanderliegen + gelichzeitige HTML/JS-Funktionalität).

Beim obersten Element (also wohl die TD) sollte das Durchreichen des Klicks nach unten unterbunden werden:

function link(e) {
 e=e || window.event;
 if(e && e.stopPropagation) {
  e.stopPropagation();
 } else if(typeof(e.cancelBubble)=="boolean") {
  e.cancelBubble=true;
 } else {
  // Manuelles Verhindern für Uralt-Browser hier implementieren (für Super-Superprofis ;-))
 }
 // Hier deine normale onClick-Routine
}

Gruß, Cybaer

[Cybaer]

Nachtrag:

// Hier deine normale onClick-Routine

Natürlich solltest Du das Event-Bubbling nur dann verhindern, wenn das Öffnen des Popups geklappt hat. Falls es nicht geklappt hat, sollte der Klick durchbubbeln bis zum A-Element, wo sich dann, dank TARGET-Attribut, en normales (HTML-)Fenster öffnet.

Gruß, Cybaer