Newsgroup: it.comp.lang.javascript
Titolo: problema con addEventListener (firefox)

Ciao a tutti,
ho fatto un menu ad albero usando solo liste non ordinate (<ul>), ma ho 
un problema con il metodo addEvenListener.
La pagina ï¿œ: 
http://tinyurl.com/y88ouj8
In teoria, cliccando su "prodotti" si dovrebbe espandere il menu 
prodotti, invece si espande il menu "clienti".
Per aggiungere gli onclick uso un ciclo for dove scorro tutti gli 
elementi <ul> del mio menu. Quando trovo un UL che ha 
classe="leftlevel2", prendo il tag <a> immediatamente sopra di esso e 
gli associo l'onclick con questa riga:
list[i].parentNode.childNodes[1].addEventListener("click", 
function(evt){toggle(mynode,evt)}, true);
e passo alla funzione toggle l'elemento UL stesso, che poi nasconderï¿œ 
nella funzione toggle.
Il problema ï¿œ proprio in questo elemento passato, che sembra non 
cambiare mai, perchï¿œ chi scompare e riappare ï¿œ sempre lo stesso 
sottomenu sotto la voce "clienti"
Da cosa puï¿œ dipendere?
Grazie
Bye!
-- 
elimina unsampdoriano per rispondere via email

Generale Cluster ha scritto:

mi sa che sei vittima di una bella closure,  e magari clienti ï¿œ l'ultima
voce della lista...?

 voce della lista...?
esatto, anche aggiungendo altre voci, ï¿œ sempre l'ultimo elemento a 
catturare l'evento.
Quindi tu dici che devo definire quella funzione anonima all'esterno 
della funzione chiamante?


 
ho provato a fare cosï¿œ,definendo una funzione esterna toggleWrapper, ma 
non cambia nulla:
function toggle(elem,e) {
	alert("toggle elem:" + elem.parentNode.childNodes[1].id);
	if (elem.style.display=="block") {
   	elem.style.display="none";
     elem.parentNode.childNodes[0].nodeValue="+";
   } else {
   	elem.style.display="block";
     elem.parentNode.childNodes[0].nodeValue="-";
   }
}
var mynode;
var list;
var oText;
prova = function toggleWrapper(evt) {
	toggle(mynode,evt);
}
function hideByClassName(clName) {
	list = document.getElementsByTagName("ul");
   for (i=0;i<list.length;i++) {
   	//alert(list[i].className);
   	if (list[i].className==clName) {
     	oText = document.createTextNode("+");
     	list[i].style.display="none";
       mynode=list[i];
 
mynode.parentNode.insertBefore(oText,list[i].parentNode.childNodes[0]);
       try {
       	mynode.parentNode.childNodes[1].addEventListener("click", prova, 
true);
       } catch (err) {
       	//list[i].parentNode.attachEvent("onclick", 
function(evt){toggle(mynode,evt)});
         //alert('skipped addeventlistener');


Generale Cluster ha scritto:

hai fatto un casotto, a parte ora non ho tempo per darci un occhiata
approfondita perchï¿œ tra dieci minuti stacco e vado a prendere il treno,
ma usare qualcosa tipo jquery,prototype?


si, avevo pensato di usare prototype, ma volevo restare piï¿œ indipendente 
possibile su questa scematina.
Comunque modificando la riga incriminata in questo modo ho risolto, 
anche se non ho capito perchï¿œ "this" non viene modificato fuori dallo 
scope della funzione:
mynode.parentNode.childNodes[1].addEventListener("click", 
function(evt){toggle(this,evt)}, true);
comunque grazie per la dritta della closure: ho capito qual ï¿œ il 
problema, ma non ho capito perchï¿œ cosï¿œ l'ho risolto ;-)
bye!


 prodotti, invece si espande il menu "clienti".
Scusa, io non capisco un granch� di Javascript, per� leggicchiando 
sul Web e con l'aiuto di questo NG, avevo fatto un qualcosa di simile 
a quello che, penso, vorresti fare tu. Vedi qui un vecchio esempio:
http://www.zspace.it/test/bmark.htm
Ma probabilmente non ho capito bene...
-- 
Saluti
Renato
 

ReZ ha scritto:

hai capito bene, ma non ho spiegato i dettagli :-)
Voglio che a struttura del menu sia asettica a prova di scimmia.
Cio� chi dovr� mantenere le voci di menu non sa nulla di javascript e 
poco di html, per cui non devo mettere id o javascript sugli elementi, 
ma devo aggiungere tutta la logica in maniera dinamica.
bye!


 maniera dinamica. bye!
Oh! 
Chiaro.
Quant'� vero che... "Gli uomini discendono dalle scimmie, 
e in qualcuno si vede di pi�"!  :-)
-- 
Saluti
Renato