Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    [js] intercettare click su menu

    ho un menu con una serie di link...
    quando faccio click su un link devo attribuirli una classe CSS che imposta un background-color evidenziandolo

    ad ogni click devo reimpostare il valore di default per i link che non sono stati cliccati, vi posto un po di codice......

    codice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <script  type="text/javascript">
    function whatever(e){
    	var e=e? e : window.event;
    	var event_element=e.target? e.target : e.srcElement;
    	//alert(event_element.tagName);
    	return event_element;
    }
    function init(){
    	var ob = document.getElementById('menu');
    	var l = ob.getElementsByTagName('a');
    	for(var i=0; i<l.length; i++){
    		l[i].onclick = function(e){
    			var t = whatever(e); alert(t)
    			if(this==t){
                                            alert('sono uguali !')
                                            // imposto il background 
                                      }// altrimenti imposto background di default
                                     
    		}
    	}	
    }
    window.onload = init;
    
    </script>
    <style type="text/css">
    </style>
    
    </head>
    
    <body>
    	<ul id="menu">
    		[*]link 1
    		[*]link 2
    		[*]link 3
    	[/list]
    
    </body>
    </html>
    è corretto o esiste una via più semplice?
    grazie

  2. #2
    ma funziona? perchè non mi sembra mica...

    prova così:

    Codice PHP:
    function init(){
       var 
    ob document.getElementById('menu');
       var 
    ob.getElementsByTagName('a');
       for(var 
    i=0i<l.lengthi++){
          
    l[i].onclick = function(e){
             
    /*Quando sono in una funzione legata ad un evento di un elemento
                La funzione ha come scope l'elemento stesso, per cui this è l'elemento stesso.
             */
             
    this.style.backgroundColor "blue";
             
    /*A questo punto devi fare un ciclo per controllare impostare
                i valori agli altri elementi
             */
             
    for(0l.lengthj++)
             {
                if(
    l[j] != this)
                {
                   
    l[j].style.backgroundColor "red";
                }
             }
          }
       }    
    }
    window.onload init
    Credo che tu non abbia molto chiaro che se imposti all'evento generale della pagina window.onclick una funzione, devi ottenere l'elemento per poterlo manipolare. Inoltre, la funzione viene chiamata SOLO per l'elemento chiamante, e tutti i suoi nodi contenitori, non per gli altri elementi della lista, devi vedere come degli interruttori che quando attivati fanno quella azione indipendentemente dagli altri.

  3. #3
    Credo che tu non abbia molto chiaro che se imposti all'evento generale della pagina window.onclick una funzione, devi ottenere l'elemento per poterlo manipolare. Inoltre, la funzione viene chiamata SOLO per l'elemento chiamante, e tutti i suoi nodi contenitori, non per gli altri elementi della lista, devi vedere come degli interruttori che quando attivati fanno quella azione indipendentemente dagli altri.
    Intanto grazie mille!! per il codice che mi hai postato davvero illuminante e da studiare

    volevo chiederti se puoi spiegarmi il discorso del window.onclick perchè non lo ho usato....

    grazie

  4. #4
    allora, gli eventi sono come interruttori che attivano una luce, o altre apparecchiature, tu puoi attaccarci quello che vuoi ad un interruttore e, quello che ci attacchi, verrà attivato quando l'interrutore viene acceso.
    Gli eventi funzionano allo stesso modo: leghi una funzione ad un evento che si verifica nel browser, in modo che, al verificarsi dell'evento, quello che sta dentro la funzione viene eseguito.

    window.onclick è l'apice della funzione onclick (o la conclusione a seconda di come la vedi): ogni evento viene "lanciato" sull'elemento che è il target dell'evento stesso (per dire, con l'onclick è l'elemento sul quale premo e rilascio il pulsante del mouse, mentre sono sull'elemento stesso). Nel momento il cui lascio il pulsante verrà chiamata la funzione definita come onclick dell'elemento target (se ce l'ha), poi, successivamente, verrà lanciato lo stesso evento su tutti gli elementi contenitori, fino a raggiungere il body, e il suo padre che è window. Per questo possiamo dire che window è l'apice, o la fine, della chiamata di un evento, ed abbiamo la certezza che definendo una funzione nell'evento window.on... al verificarsi di quell'evento in qualunque punto della pagina, arriverà poi ad essere lanciato anche sulla window.
    La differenza nel indicare un evento nella window e non nell'elemento, è che:
    1- La funzione viene eseguita ogni volta che viene lanciato l'evento, questo può essere comodo quando non si sa a priori quali elementi dovranno essere interessati da quell'evento, ma causa anche il problema di discriminare chi ha scatenato l'evento.
    2- Proprio perché window NON è l'elemento scatenante, non mi basta chiamare this per trovare chi ha lanciato l'evento, devo ottenere il target dell'evento stesso, cosa tutt'altro che facile dato che ci sono 3 - 4 modi diversi di farlo a secondo che si tratti di un browser o di un altro.

    Spero di essere stato chiaro

  5. #5
    che dire, intervento da professorone
    grazie ancora per le spiegazioni

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.