[DOM] Pb gestion de l'évènement mouseout sur une <DIV>

Version imprimable

Bonjour,

j'ai un petit souci de compéhension au sujet de la gestion de l'évènement mouseout. J'ai une Div qui contient un Tableau, je voudrais appeler une fonction javascripts quand la souris quitte cette Div.

Mon code ressemble à:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="Div1" onmouseout="maFonctionJavascript();"> <table border="1" cellspacing="0" cellpadding="0" > <tr> <td > </td> <td> </td> <td > </td> </tr> <tr > <td > </td> <td> </td> <td > </td> </td> </tr> </table> </div>
Je remarque que l'évènement est déclenché à plusieurs reprises et pas seulement quand je quitte la Div !!! par exemple quand je change de cellule dans le tableau et à l'intérieur de la Div !!!!! Que faut il que je fasse pour arriver à mon résultat.

D'avance, merci pour votre aide.

bonjour,

Le truc est qu'il faut gérer aussi l'événement over sur le div : s'il a lieu on empèche l'exécution de fonction mouseOut(). Cette fonction est appelé 200ms (tu peux faire varier la durée, mais 200ms c'est suffisant) après l'appel de la fonction fout(). Si dans ce laps de temps, l'événement over a lieu, on fait un clearTimeout et la fonction mouseOut() n'est pas appelée.

Le code affiche également l'ordre d'appel des fonctions, pour tu puisses voir comment l'ensemble fonctionnne (<div id="test">).

J'affiche également une bordure au div : je te conseille de donner les mêmes dimensions à ton div et ton tableau pour éviter tout souci avec les é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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <div style="border: 1px solid #AAAAAA" id="Div1" onmouseout="fout()" onmouseover="fover()"> <table border="1" cellspacing="0" cellpadding="0" > <tr> <td> bla bla bla</td> <td> bla bla bla</td> <td > bla bla bla</td> </tr> <tr > <td > bla bla bla</td> <td> bla bla bla</td> <td > bla bla bla</td> </td> </tr> </table> </div> <div id="test"></div> </body> </html>

22/01/2007, 14h37
rvux69

Résolu mais...

merci beaucoup, c'est tout à fait je que je voulais :lol:
Cependant je suis assez surpris par le comportement de l'évènement "mouseout" !!!!! je découvre qu'il s'applique aussi aux éléments enfants du DOM 8O

Hervé.
22/01/2007, 14h58
Auteur

Citation:

Envoyé par rvux69

merci beaucoup, c'est tout à fait je que je voulais :lol:
Cependant je suis assez surpris par le comportement de l'évènement "mouseout" !!!!! je découvre qu'il s'applique aussi aux éléments enfants du DOM 8O

Hervé.

non il s'applique au div ! Quand tu survoles l'enfant (une bordure du tableau) tu sors du div (out) et tu entres dans l'enfant mais comme l'enfant est dans le div, tu entres à nouveau dans le div (over).
Le plus difficile à mettre en évidence est le nombre de fois que l'événement est appelé : cela dépend du navigateur.
Et surtout savoir par quel événement cela va se terminer : un out ou un over ? Sur ce dernier point je crois que les navigateurs sont d'accord.

Citation:

Citation:

Envoyé par rvux69

merci beaucoup, c'est tout à fait je que je voulais :lol:
Cependant je suis assez surpris par le comportement de l'évènement "mouseout" !!!!! je découvre qu'il s'applique aussi aux éléments enfants du DOM 8O

Hervé.

non il s'applique au div ! Quand tu survoles l'enfant (une bordure du tableau) tu sors du div (out) et tu entres dans l'enfant mais comme l'enfant est dans le div, tu entres à nouveau dans le div (over).

Pour illuster ce propos :
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 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;" onmouseover="over1()" onmouseout="out1()"> div 1 <div style="width: 100px; height: 100px; border: 1px #AAAAAA solid; margin:30px;" onmouseover="over2()" onmouseout="out2()"> div 2 <div style="width: 50px; height: 50px; border: 1px #AAAAAA solid; margin:15px;" onmouseover="over3()" onmouseout="out3()"> div 3 </div></div></div> <div id="idDiv"></div> </body> </html>
Passe la souris sur les différents div et regarde l'affichage. ;)