✔ IE: Event-Handler für einen Node setzen

C

Ceppi

Erfahrenes Mitglied
Hallo Tutorianer :-),

beim Aufbauen eines Baummenüs auf Listenbasis stehe ich vor dem Problem, vom Script generierten img-Nodes ein onClick-Event hinzuzufügen. FF hat jedenfalls mit einem einfachen setAttribute keine Probleme:
Javascript: 
ocEreignis = "jsOnOff(this.parentNode,'"+divId+"');";
//...
bildKnoten['ordner'].setAttribute('onclick',ocEreignis);
//...
Allerdings geht der IE diesen Schritt nicht mit - auch proprietäre Methoden wie attachEvent() funktionieren bei mir nicht. Wichtig: Der bei onClick notierte Funktionsaufruf sollte Argumente akzeptieren und der Bezug zum Node über das Wort this nicht verlorengehen...

Ceppi
 
Leider läuft es auch so nicht, ich bekomme aber auch keine Fehlermeldung:confused:.
Dann muss ich mich wohl nach anderen Workarounds umsehen.

Ceppi
 
Also, Folgendes habe ich ausprobiert:

Javascript: 
bildKnoten['ordner'].onclick = new Function('f',ocEreignis);
alert(bildKnoten['ordner'].getAttribute('onclick'));

Dabei bekomme ich diese Meldung ausgegeben:
function anonymous(f){ ...(Variablenwert von ocEreignis) }

Allerdings wird das onClick-Ereignis so dann nicht ausgeführt:(
 
Hallo Gumbo,

ja, ich habe auch deine Variante getestet: mit dem gleichen Resultat wie in meinem vorherigen Beitrag...
 
Hallo,

Die Variable DivId wird der allesumfassenden Funktion übergeben, die dann aus lauter <li>-Elementen ein Baummenü bastelt. Insofern läuft der Code für das Onclick-Event ja auch im FF.

Nur wird das Event dann im IE nicht ausgeführt - oder nicht ausgelöst:confused:
Falls es hilft beim Ausprobieren oder wen es interessiert, hier ist der Code für mein Menü (schneckenlangsam im IE:rolleyes: , z.T. inspiriert durch das JS-Menü hier bei tutorials.de/Sven Mintel):
Javascript: 
//Menüaufruf durch jsMenu(ID des eine HTML-Liste umschließenden Elements)	
	    function jsMenu(divId) {
			  
				//Array mit den Bildpfaden angeben
				var bilder = new Array();
				bilder['blind'] = 'images/space.gif';
				bilder['ordner'] = 'images/closed.gif';
				bilder['text'] = 'images/file.gif';
				
				//Menüaufruf für onClick-Ereignis
				ocEreignis = "jsOnOff(this.parentNode,'"+divId+"');";
				
				//Menü umfassenden DIV-Container holen
				var menuContainer = document.getElementById(divId);
				
				//Alle LI-Tags im DIV-Container holen
				var liElemente = menuContainer.getElementsByTagName('li');
				
				//Bildknoten erstellen
				var bildKnoten = new Array();
				bildKnoten['standard'] = document.createElement('img');
				
				//Ordnerknoten erstellen
				bildKnoten['ordner'] = bildKnoten['standard'].cloneNode(true);
				bildKnoten['ordner'].setAttribute('src',bilder['ordner']);
				
				//Browserweiche wegen schlechter Unterstützung von setAttribute onClick
				//seitens des IE
				if( navigator.appName == "Netscape" ) {
				  bildKnoten['ordner'].setAttribute('onclick',ocEreignis);
				}
				else {									
				  bildKnoten['ordner'].onclick = new Function(ocEreignis);
					alert(bildKnoten['ordner'].getAttribute('onclick'));

				}			
					
				bildKnoten['blind'] = bildKnoten['standard'].cloneNode(true);
				bildKnoten['blind'].setAttribute('src',bilder['blind']);
				
				bildKnoten['text'] = bildKnoten['standard'].cloneNode(true);
				bildKnoten['text'].setAttribute('src',bilder['text']);
				
				//Jedes LI-Tag bearbeiten
				for( i=0 ; i<liElemente.length ; i++ ){
				
				  var bIndex = (liElemente[i].getElementsByTagName('li').length > 0)? 'ordner' : 'text' ;
					var dimension = jsDimension(menuContainer,liElemente[i]);
					
					bild = bildKnoten[bIndex].cloneNode(true);
					
					liElemente[i].insertBefore(bild,liElemente[i].childNodes[0]);
														
					for( x=1 ; x<= dimension ; x++ ){
					  liElemente[i].insertBefore(bildKnoten['blind'].cloneNode(true),liElemente[i].childNodes[0]);
					}
					
					if( dimension > 1 ) {
					  liElemente[i].style.display = 'none';
					}															
				}
								
			}
			
			//Ebene eines Memnüelements herausfinden
	    function jsDimension(div,objekt){
	        dimension = -1;
	        pNode = objekt.parentNode;
					
	        while( pNode != div ){
	          if( pNode.tagName == 'UL' )
						  { dimension++; }
								
	          pNode = pNode.parentNode;
	        }
	        return dimension;
	    }	
			
			function jsOnOff(liElement,divId){
				alert('jsOnOff wird aufgerufen.');
				liElemente = liElement.getElementsByTagName('li');							  
				offen = ( liElemente[0].style.display == "block" )? true : false;
				
				//Untermenüs sind offen, werden geschlossen
				if( offen ) {
				
				  for( i=0 ; i<liElemente.length ; i++ ){
					  liElemente[i].style.display = 'none' ;
					}				
				}
				//Untermenüs sind geschlossen, werden geöffnet
				else {
				
					menuContainer = document.getElementById(divId);
					parentDimension = jsDimension(menuContainer,liElement);
					
				  for( i=0 ; i<liElemente.length ; i++ ){
					  dimension = jsDimension(menuContainer,liElemente[i]);
					  liElemente[i].style.display = (dimension > parentDimension+1 )? 'none' : 'block' ;
					}
				}
			}
 
Ein Workaround

Hallo,

ich habe nun endlich einen Trick gefunden, wie ich es nun umsetzen kann:
Den Event-Handler setze ich mit attachEvent und weise dort eine Funktion ohne Argumente zu.
Die eigentlich benötigten Parameter werden dem Event-Target vorher als Eigenschaften per setAttribute() zugewiesen, worauf ich dann sozusagen "global" von der Funktion aus zugreifen kann.
Javascript: 
//Eigenschaft setzen
bildKnoten['ordner'].setAttribute('divParent',divId);

//Achtung: nur IE
bildKnoten['ordner'].attachEvent('onclick',jsOnOffIE);

//Für onclick gesetzte Funktion:
			function jsOnOffIE(){
				
				liElement = window.event.srcElement.parentNode;
				divId = liElement.divParent;
				
//...
}

Nochmal danke an Gumbo und Sven für die Hilfe...
Thema erledigt;-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück