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

**rvux69** · 21/01/2007, 20h21

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 html :

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

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 >&nbsp;</td>
            <td>&nbsp;</td>
            <td >&nbsp;</td>
        </tr>
        <tr >
            <td >&nbsp;</td>
            <td>&nbsp;</td>
            <td >&nbsp;</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.

**Auteur** · 21/01/2007, 20h51

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 :

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
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">
<!--
var timer = null;
function mouseOut()
{
 alert("je suis sorti !!");
}
function fout()
{
  timer = setTimeout(function(){mouseOut()},"200");
  document.getElementById("test").innerHTML += " out ";
}
 
 
function fover()
{
  clearTimeout(timer);
  document.getElementById("test").innerHTML += " over ";  
}
 
//-->
</script>
 
</head>
 
<body>
 
<div style="border: 1px solid #AAAAAA" id="Div1" onmouseout="fout()" onmouseover="fover()">
 
  <table border="1" cellspacing="0" cellpadding="0" >
  <tr>
  <td>&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td >&nbsp;bla bla bla</td>
  </tr>
  <tr >
  <td >&nbsp;bla bla bla</td>
  <td>&nbsp;bla bla bla</td>
  <td >&nbsp;bla bla bla</td>
  </td>
  </tr>
  </table>
 
</div>
 
    <div id="test"></div>
 
</body>
 
</html>

**rvux69** · 22/01/2007, 15h37

merci beaucoup, c'est tout à fait je que je voulais

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

Hervé.

**Auteur** · 22/01/2007, 15h58

Envoyé par rvux69

merci beaucoup, c'est tout à fait je que je voulais

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

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.

**Auteur** · 22/01/2007, 22h27

Envoyé par rvux69

merci beaucoup, c'est tout à fait je que je voulais

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

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 html :

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
37
38
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function out1() {document.getElementById("idDiv").innerHTML += " (div 1 out)";}
 
function out2() {document.getElementById("idDiv").innerHTML += " (div 2 out)";}
 
function out3() {document.getElementById("idDiv").innerHTML += " (div 3 out)";}
 
function over1() {document.getElementById("idDiv").innerHTML += " (div 1 over)";}
 
function over2() {document.getElementById("idDiv").innerHTML += " (div 2 over)";}
 
function over3() {document.getElementById("idDiv").innerHTML += " (div 3 over)";}
 
//-->
</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.

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

JavaScript

Discussions similaires

Partager

Partager