href mit Javascript-Klassen-Methode belegen

Hi Leute,

jedes mal aufs Neue bereitet mir Javascript kopfzerbrechen.
Also ich habe in JS die Klasse (ich nenn's mal Klasse, heißt ja in JS anders) "AdvancedSearch" mit der Methode "removeSearchCriteria", die ein Dom-Node als Parameter erwartet.

So, innerhalb der Klasse erstelle ich im Konstruktor per DOM einen Link und hänge den ins Dokument ein. Beim Klicken soll jetzt besagte Klassenmethode aufgerufen werden. Ich habe es jetzt mit dem onclick-Eventhandler gelöst:

var A = document.createElement('a');
A.onclick = function(){AdvancedSearch.removeSearchCriteria(this.parentNode)};

AdvancedSearch ist dabei eine globale Variable mit der Klassenreferenz und auch innerhalb der Klasse mit var AdvancedSearch = this; definiert.

So wie gesagt, das funktioniert. Nur wie bekomme ich das als JS-Aufruf im href-Attribut hin? Ich habe versucht:

var A = document.createElement('a');
A.href = 'javascript:AdvancedSearch.removeSearchCriteria(this.parentNode);';

Damit erscheint in der FF-Konsole:

Fehler: AdvancedSearch.removeSearchCriteria is not a function
Quelldatei: javascript:AdvancedSearch.removeSearchCriteria(this.parentNode);
Zeile: 1

Ich sehe gerade "Zeile 1" - merkwürdig

Wenn ich jetzt probehalber folgendes probiere:

A.href = "javascript:alert(AdvancedSearch);";

so wird mir im Alert-Fenster der gesamte Klassenquelltext ausgegeben.

Ich weiß jetzt nicht mehr so richtig weiter. Ich bitte um Erleuchtung.

[ChrisB]

Nur wie bekomme ich das als JS-Aufruf im href-Attribut hin?

Wozu ...?

JavaScript-Aufrufe im href-Attribut von Links unterzubringen, ist wenig sinnvoll.
Links sollen verlinken - idealerweise in so einem Fall auf die Alternative, die die Funktionalität/den Inhalt auch zur Verfügung stellt, wenn kein JS verfügbar ist.
Wenn es eine solche nicht gibt - dann solltest du eher überlegen, ob du überhaupt ein A-Element dafür benutzt.

Wenn du bereits eine per onclick funktionierende Variante hast - dann kann ich darin, wieder auf href="javascript:..." umzustellen, jedenfalls gar keinen Sinn erkennen.

[hts]

Also das Anker-Element hat den Charme, dass beim Mouseover automatisch der Mouse-Cursor zum Pointer wird. Würde ich ein anderes Element nehmen, müsste ich dieses Verhalten zusätzlich per mousover und mouseout hinzufügen.
Lasse ich beim a-Element das href weg, ändert sich der Cursor ebenfalls nicht.
Belege ich das href mit #, so springt, wenn eine Suchoption hinzugefügt wird und der Bildschirm schon voll ist der Browser in die Bildschirmmitte.

Das waren meine Intention, warum href mit JS.
Außerdem ist es doch legitim und warum also nicht?
Achso, die Anwendung setzt JS voraus, also ist ein alternativer Verweis nicht notwendig.

[Manko10]

Also das Anker-Element hat den Charme, dass beim Mouseover automatisch der Mouse-Cursor zum Pointer wird. Würde ich ein anderes Element nehmen, müsste ich dieses Verhalten zusätzlich per mousover und mouseout hinzufügen.

Quark. CSS

.xyz:hover {
    cursor: pointer;
}

oder wenn es sich um eine reine JS-Funktionalität handelt, einfach die hover()-Eigenschaft eines beliebigen JS-Frameworks nutzen. Ist zigmal einfacher und zuverlässiger als manuelles Herumbasteln mit mouseover und mouseout.

Bei Belegung mit # sollte die Seite eigentlich zum Anfang springen. Mit JS lässt sich das Ausführen des hrefs übrigens mit einem return: false im Event-Handler verhindern. Damit kannst du eine „unaufdringliche“ (unobtrusive) JS-Funktionalität mit vernünftigem Fallback anbieten.

Wenn ein Link-Element allerdings gar keine semantische Bedeutung an dieser Stelle hat, dann solltest du das auch nicht nutzen, sondern das entsprechend richtige Element.

[hts]

Ok, ihr habt mich überzeugt, ich nehme jetzt ein SPAN. Mit dem :hover klappt auch super.
Da habe ich dann gleich noch eine Frage zum CSS. Die Spans befinden sich in einer UL/LI verschachtelten Liste innerhalb der LI-Tags. Mein bisheriges CSS dazu:

ul.advanced_search 
{
   	margin: 0;
   	padding: 0;
}
  
ul.advanced_search li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.advanced_search ul
{
	border-left: 2px solid white;
	border-bottom: 2px solid white;
	margin-top: 10px;
}

Für die Spans habe ich jetzt eine neue CSS-Klasse erstellt. Kann man das nicht in das bestehende CSS integrieren? Dieser Versuch hatte keinen Effekt:

li.advanced_search span:hover
{
	cursor: pointer;
}

[nikosch]

href="javascript:void(0);"

!

[Manko10]

Das ist vBulletin-JS und das halte ich für eine schlechte Idee, da kein Fallback gegeben ist für Leute, die kein JavaScript aktiviert haben. Deshalb einfach return: false im Event-Callback.

[nikosch]

da kein Fallback gegeben ist für Leute, die kein JavaScript aktiviert haben

Natürlich muss das href dynamisch dahingehend gesetzt werden.

Deshalb einfach return: false im Event-Callback.

Hatte leider in letzter Zeit öfter Fälle, in denen das nicht funktioniert hat.

[Manko10]

Natürlich muss das href dynamisch dahingehend gesetzt werden.

Ist eigentlich Blödsinn.

Hatte leider in letzter Zeit öfter Fälle, in denen das nicht funktioniert hat.

Wenn es richtig gesetzt ist, funktioniert es zuverlässig. Keinerlei Bedarf, irgendwie am href herumzupfuschen. Übrigens ist eine href-Manipulation auch für User mit aktiviertem JavaScript oft äußerst unpraktisch. Stichwort: MMB-Klick für neuen Tab.

[nikosch]

Übrigens ist eine href-Manipulation auch für User mit aktiviertem JavaScript oft äußerst unpraktisch. Stichwort: MMB-Klick für neuen Tab.

Bitte näher erklären! Ein JS-Event wie ToggleBox kann man doch ohnehin nicht in einem neuen Tab öffnen.

Wenn es richtig gesetzt ist, funktioniert es zuverlässig

Finde leider grad kein konkretes Beispiel.

[Manko10]

Beim konkreten Beispiel der Toggle-Box magst du Recht haben, allerdings ist hier auch ein A-Element vollkommen fehl am Platze, weil du eben kein Verweisziel angeben kannst.
Semantisch korrekt ist ein A-Element aber z.B. bei Popup-Fenstern oder Inhalten, die per Ajax geladen werden und mit Page-Reload-Fallback versehen sind. Oft wird hier aber der href manipuliert (oder noch schlimmer: gleich im Quelltext auf ein JavaScript-Ziel gesetzt), wodurch das Öffnen in einem neuen Tab unmöglich wird.

[nikosch]

allerdings ist hier auch ein A-Element vollkommen fehl am Platze, weil du eben kein Verweisziel angeben kannst.

Das ist richtig. Aus Gründen der Browserunterstützung (:hover) ist das leider oft nicht zu verhindern. Zudem könnte man mit dem A noch ein PHP-seitiges Fallback (bspw. bei einer Tab-Anzeige) für Non-JS-Unterstützung umsetzen:

<a href="?tab=1">Tab 1</a>
<a href="?tab=2">Tab 2</a>
<a href="?tab=3">Tab 3</a>

könnte via JS das href auswerten und die Tab-ID herausziehen. Dann mit onClick auf Toggeling setzen und href durch obiges void ersetzen.
GET[tab] wird serverseitig als Initialwert „Toggeling open“ gesetzt.

[Manko10]

Das ist richtig. Aus Gründen der Browserunterstützung (:hover) ist das leider oft nicht zu verhindern.

Gilt nur für den IE und auch nur für CSS-Hover.

Zudem könnte man mit dem A noch ein PHP-seitiges Fallback (bspw. bei einer Tab-Anzeige) für Non-JS-Unterstützung umsetzen:

Genau so ein Beispiel habe ich im vorigen Post genannt und eben hier ist das Öffnen in einem neuen Tab möglich, sofern das href-Attribut in Ruhe gelassen wird.

könnte via JS das href auswerten und die Tab-ID herausziehen. Dann mit onClick auf Toggeling setzen und href durch obiges void ersetzen.

Tab-ID auswerten ist in Ordnung, href wird aber nicht angefasst, hier werden DOM-EventHandler eingesetzt. Wer zu faul ist, hier für die Crossbrowser-Unterstützung selbst aufzukommen, nutzt dafür ein gemeines Wald-und-Wiesen-JS-Framework. Auch möglich (aber nicht so schön) ist, direkt die Eigenschaften onclick, onmouseover, onmouseout usw. zu nutzen (natürlich im JS, ich spreche nicht von den HTML-Attributen, die sind absolut böse).

[ChrisB]

Für die Spans habe ich jetzt eine neue CSS-Klasse erstellt. Kann man das nicht in das bestehende CSS integrieren?

Doch, kann man - aber man muss es natürlich auch richtig machen.

Dieser Versuch hatte keinen Effekt:

li.advanced_search span:hover { cursor: pointer; }

Sind es denn die LI-Elemente, die diese Klasse haben ...?

[Manko10]

Sind es denn die LI-Elemente, die diese Klasse haben ...?

Mal abgesehen davon, dass es sich dabei sowieso um einen ineffizienten CSS-Selektor handelt. Faustregel: wenn nicht unbedingt erforderlich, Element-Angabe immer weglassen und nur ID/Klasse benennen.