limiter les Actions javascript

Version imprimable

Bonsoir,

J'ai une petite question en javascript...

Voila j'ai un DIV (test2) inséré dans un autre (test1), sur ce div test1 je met une action javascript "onmouseover" ce qui marche très bien le problème c'est que quand je survole le div test2 il ré appel la fonction showHide, est ce possible de juste mettre l'action sur le div test1 et non pas sur le div test2

Voici le code d'exmple
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans nom</title> <script type="text/javascript"> function $(idDiv){ return document.getElementById(idDiv); } function showHide(idDiv){ console.log('coucou'); } window.onload = function(){ $('test1').onmouseover = function(){ showHide('test1'); } } </script> </head> <body> <div id="test1" style="border:1px solid #000"> content1 <div id="test2" style="border:1px solid #000"> content2 </div> </div> </body> </html>
Merci d'avance

bonjour,

d'après le bout code posté, l'événement onmouseover est uniquement sur le div test1 pas sur div test2. Maintenant pourquoi l'événement se déclenche-t-il sur le div test2 ?

Voilà ce qu'il se passe :

tu entres dans test 1 => déclenchement du onmousover (logique) et exécution de showHide() ;
quand tu entres dans test 2 il se passe 3 choses :

tu sors de test 1 ;
tu entres dans test 2 ;
comme test 2 se trouve dans test 1, tu entres dans test 1 (tu étais sorti de test 1 de en (a)) => le onmouseover est à nouveau déclenché, ta fonction showHide() est à nouveau exécutée.

Il faut gérer le onmouseover sur tes deux div. Voilà une solution :
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <meta name="Author" content="Auteur - www.developpez.com" /> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <div id="divParent" onmouseover="evOverDiv(this)"> <div id="divEnfant" onmouseover="evOverDiv(this)">   </div> </div> <div id="messageSortie"></div> </body> </html>
La variable overDivEnfant passe à true quand tu survoles le div enfant (onmouseover sur le div enfant) et tu exécutes fonctionDivEnfant().

Pour éviter le déclenchement de l'événement onmouseover sur le parent (propagation des événements), lors du second appel de la fonction evOverDiv(), la variable overDivEnfant étant à true, on sort de la fonction et évite ainsi l'exécution de la fonction fonctionDivParent().

Si tu survoles uniquement le div parent la variable overDivEnfant reste toujours à false et seule la fonction fonctionDivParent() est exécutée.

En faisant une recherche dans le forum, tu trouveras plus de détails sur le mode de propagation des événements dans des éléments imbriqués. ;)

19/09/2008, 10h05
gunth

et cette fonction (stopPropagation ) ne fait pas la même chose ?
19/09/2008, 10h24
SpaceFrog

ce n'est pas un évènement ...
19/09/2008, 10h38
gunth

le problème que j'ai actuellement c'est que j'aimerais savoir quand est ce que on sort du div parent, mais dans ce cas ci si je rentre dans le div enfant, il va me dire que je sort du div parent hors que en faite visuellement non, comment faire alors pour savoir que je sort réellement du div parent et que je ne rentre pas dans le div enfant...
19/09/2008, 10h41
SpaceFrog

avec un setTimeout et un clearTimeout

tu set un timeout lorsque tu quittes le parent et tu l'annules lorsque tu rentre dans l'enfant.
Ainsi si la focntion du setTimout abouti c'est que tu quiite le parent sasn rentrer dans l'enfant
19/09/2008, 10h45
gunth

sans vouloir abuser, tu aurais un code d'exemple pour me mettre sur la piste ?

Si si c'est abuser ...

mais bon dans ma grande générosité ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
var launched
function Do(){
launched=setTimeout(function(){what()},100)
}
function what(){
alert('je sors complètement');
}
</script>
</head>
 
<body>
<div style="height:300px;width:200px;background-color:yellow;text-align:center;padding-top:50px;" onmouseout="Do()" onmouseover="clearTimeout(launched);"><div style="positon:relative:top:10px;width:10px;background-color:blue;" onmouseover="clearTimeout(launched);"  >coucou</div></div>
</body>

qui peut aussi se traiter juste avec un flag et un petit délai :

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type='text/javascript'>
var Parent=true
var launched
function what(){
if(Parent){alert('je sors complètement');}
}
</script>
</head>
<body>
<div style="height:300px;width:200px;background-color:yellow;text-align:center;padding-top:50px;" onmouseout="Parent=true;setTimeout(function(){what()},100)" onmouseover="Parent=false;"><div style="positon:relative:top:10px;width:10px;background-color:blue;" onmouseover="Parent=false;"  >coucou</div></div>
</body>

19/09/2008, 12h26
Auteur

la gestion des événements onmouseover / onmouseout dans des éléments imbriqués a été évoqué dans cette discussion :
http://www.developpez.net/forums/d59...nts-imbriques/

Le sujet a été présenté sous forme de défi, des codes divers ont été présentés avec leurs avantages et leur inconvénients.
19/09/2008, 13h28
SpaceFrog

j'avais même pas participé ???

je devais être malade ou en congés ???
19/09/2008, 13h32
Bovino

8O8O8O8O

Citation:

je devais être malade ou en congés ???

Ca t'arrive ???
19/09/2008, 13h38
gunth

Ok parfait, un grand merci a vous tout fonctionne correctement
19/09/2008, 14h48
Auteur

Citation:

Envoyé par SpaceFrog

j'avais même pas participé ???

je devais être malade ou en congés ???

en congé sans doute ;) C'était en plein mois d'août.