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.