href mit Javascript-Klassen-Methode belegen

hts · 16.09.2010, 16:10

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:

Code:

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:

Code:

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

Damit erscheint in der FF-Konsole:

Code:

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:

Code:

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 · 16.09.2010, 16:23

Zitat:

Zitat von hts

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 · 16.09.2010, 16:40

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 · 16.09.2010, 16:45

Zitat:

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

Code:

.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 · 16.09.2010, 17:33

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:

Code:

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:

Code:

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

nikosch · 16.09.2010, 17:36

Code:

href="javascript:void(0);"

!

Manko10 · 16.09.2010, 17:37

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 · 16.09.2010, 17:44

Zitat:

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

Natürlich muss das href dynamisch dahingehend gesetzt werden.

Zitat:

Deshalb einfach return: false im Event-Callback.

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

Manko10 · 16.09.2010, 17:46

Zitat:

Natürlich muss das href dynamisch dahingehend gesetzt werden.

Ist eigentlich Blödsinn.

Zitat:

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 · 16.09.2010, 17:51

Zitat:

Ü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.

Zitat:

Wenn es richtig gesetzt ist, funktioniert es zuverlässig

Finde leider grad kein konkretes Beispiel.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
timing Probleme bzw Zusammenspiel PHP Javascript	thica	PHP Tipps 2009	2	19.02.2010 19:06
javascript im a href ohne Funktionsaufruf	Cartman1984	JavaScript, Ajax und mehr	16	05.06.2009 18:29
Mehrere Klassen verknüpfen	BlackJack01090	Software-Design	9	26.05.2009 20:43
Modulare Programmierung - Klassen nur in Klassen Gültig	iXtends	Software-Design	6	26.05.2009 15:37
[Erledigt] Variable von Javascript mit 1x1px-Bild an PHP übergeben	beneblack	PHP Tipps 2009	18	03.05.2009 22:40
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
auruf klassen Methode	ombolo30	PHP Tipps 2009	11	09.04.2009 15:54
1101: 10x JavaScript und kein Ende ist abzusehen…	Nikolaus 2.0	Adventskalender 2008	9	13.12.2008 20:11
per Methode an Klassen Array	Riks	PHP Tipps 2007	2	06.01.2007 16:02
Klassen	Fatal Error	PHP Tipps 2005-2	3	19.10.2005 15:31
Menü mit Unterpunkten	supertramp	Beitragsarchiv	7	18.10.2005 22:40
Javascript, Tabulator, a href		PHP Tipps 2004	2	05.10.2004 18:23

16.09.2010, 16:10
hts Erfahrener Benutzer Registriert seit: 07.09.2010 Beiträge: 722 PHP-Kenntnisse: Fortgeschritten	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: Code: 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: Code: var A = document.createElement('a'); A.href = 'javascript:AdvancedSearch.removeSearchCriteria(this.parentNode);'; Damit erscheint in der FF-Konsole: Code: 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: Code: 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.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.09.2010, 16:40
hts Erfahrener Benutzer Registriert seit: 07.09.2010 Beiträge: 722 PHP-Kenntnisse: Fortgeschritten	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.

16.09.2010, 17:33
hts Erfahrener Benutzer Registriert seit: 07.09.2010 Beiträge: 722 PHP-Kenntnisse: Fortgeschritten	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: Code: 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: Code: li.advanced_search span:hover { cursor: pointer; }

16.09.2010, 17:36
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Code: href="javascript:void(0);" ! __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

16.09.2010, 17:37
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	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. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”