Selon la façon d'assigner un handler, le flot d'événements généré est différent
Bonjour,
J'essaie de créer un menu en cascade.
Au niveau HTML, j'ai une simple liste <UL> :
Code:
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:
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:
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
