Discussion :

[cris9]

Bonjour,
J'essaie de créer un menu en cascade.

Au niveau HTML, j'ai une simple liste <UL> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
 <ul id="menu" >
 <li id="licontact">    contact
 	<ul id="ulcontact">
 	<li id="lijeremie">  Jeremie
 		<ul id="uljeremie">          
                <li id="limail">Mail</li>
 		<li id="liwebjere">Site Web</li>
 		</ul>
 	</li>
 	<li id="livirginie"> Virginie
 		<ul id="ulvirginie">
 		<li id="limailvir">Mail</li>
 		<li id="liwebvir">Site Web</li>
 		</ul>
 	</li>
 	<li id="liagathe"> Agathe
 		<ul id="ulagathe">
 		<li id="limailaga">Mail</li>
 		<li id="liwebaga">Site Web</li>
 		</ul>
 	</li>
 	</ul>
</li>
</ul>

Pour la gestion des événements :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
function hover(evt){
    var target;
    var event = evt || window.event;
 
    if(event.target) target = event.target;
    else target = event.srcElement;
 
    var currentTarget = event.currentTarget ? event.currentTarget.tagName : 'tag unknown';
    var currentTargetId = event.currentTarget ? event.currentTarget.id : 'id unknown';
 
    log('log',' ['+ event.type +']  [target]  '+ target.tagName + '  id=' + target.id  +
    ' [curTarget] '+currentTarget + '  id=' + currentTargetId);
 
   var obj = target;
   UL = obj.getElementsByTagName('ul');
   if(UL.length > 0){
    	sousMenu = UL[0].style;
  	if(sousMenu .display == 'none' || sousMenu.display == ''){
  	   sousMenu.display = 'block';
           logln('log','affiche sous menu');
    	}
        else{
  	  sousMenu.display = 'none';
          logln('log','cache sous menu');
  	}
    }
 }
 function setHover(){
  LI = document.getElementById('menu').getElementsByTagName('li');
  nLI = LI.length;
  for(i=0; i < nLI; i++){
  	LI[i].onmouseover = hover;
  	LI[i].onmouseout = hover;
  }
}

Cette méthode ne marche pas; Lorsque je passe la souris sur l'un des items du menu, cela
affiche bien le sous meu, mais lorsque je passe la souris sur un item du sous menu, celui-ci disparait.
Voici la trace qui permet de voir les événements générés:

// evt généré lors du passage de la souris sur le 1er menu
[mouseover] [target] LI id=licontact [curTarget] LI id=licontact >affiche sous menu
// les evts suivants sont générés en déplaçant la souris vers le sous menu
[mouseout] [target] LI id=licontact [curTarget] LI id=licontact >cache sous menu
[mouseover] [target] UL id=ulcontact [curTarget] LI id=licontact >affiche sous menu
[mouseout] [target] UL id=ulcontact [curTarget] LI id=licontact >cache sous menu

C'est le même résultat sous Firefox 2 ou IE 6/7.
On dirait que le mouseover sur le sous-menu (LI) n'est pas généré.

Puis, si je modifie le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
  function setHover(){
  		LI = document.getElementById('menu').getElementsByTagName('li');
 
  		nLI = LI.length;
  		for(i=0; i < nLI; i++){
  			LI[i].onmouseover = function(){      hover(this,'over');    }
  			LI[i].onmouseout = function(){      hover(this,'out');    }
  		}
  	}

Le menu marche. La trace du script :

// evt généré lors du passage de la souris sur le 1er menu
[over] [target] LI id=licontact [curTarget] tag unknown id=id unknown affiche sous menu
// les evts suivants sont générés en déplaçant la souris vers le sous menu
[out] [target] LI id=licontact [curTarget] tag unknown id=id unknown cache sous menu
[over] [target] LI id=licontact [curTarget] tag unknown id=id unknown affiche sous menu
[out] [target] LI id=licontact [curTarget] tag unknown id=id unknown cache sous menu
[over] [target] LI id=lijeremie [curTarget] tag unknown id=id unknown affiche sous menu
[over] [target] LI id=licontact [curTarget] tag unknown id=id unknown affiche sous menu


Le flow d'événement a changé rien qu'à cause de la manière d'assigner les handlers!
J'ai bien mon mouseover sur l'item du sous-menu.

Avez-vous une explication ?

Merci

[SpaceFrog]

l'explication est qu'il faut utiliser la seconde syntaxe car on doit attribuer une fonction sur le onmouseover et de toute façon c'est la seule syntaxe crossbrowser