onmouseover onmouseout sur des éléments imbriqués

**Auteur** · 05/08/2008, 15h29

Le but est de gérer les événements onmouseover et onmoueout sur deux div imbriqués sans utiliser de timer, ni stoppropagation ni cancelbubble.

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<!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" />
 
<style type="text/css">
<!--
#divParent{
  width: 200px; 
  height: 200px;
}
#divEnfant{
  width: 100px; 
  height: 100px;
  margin:30px;
}
 
.divOver{
  border: 1px #0000FF solid;
}
.divOut{
  border: 1px #AAAAAA solid;
}
-->
</style>
 
 
<script type="text/javascript">
<!--
var dansDivEnfant = false;
 
function overParent()
{
  if (dansDivEnfant)
    return false;
   
  /* suite de la fonction */  
  document.getElementById("messageSortie").innerHTML = "vous êtes dans le div parent";
  document.getElementById("divParent").className = "divOver";
  
}
 
function outParent()
{    
  document.getElementById("messageSortie2").innerHTML = "vous êtes sortis...";
  document.getElementById("divParent").className = "divOut";
}
 
 
function overEnfant()
{
  dansDivEnfant = true;   // placer ces lignes de code au début de la fonction /!\
  
  
  /* suite de la fonction */
  document.getElementById("messageSortie").innerHTML = "vous êtes dans le div enfant";
  document.getElementById("divEnfant").className = "divOver";
  
}
 
function outEnfant()
{
  dansDivEnfant = false;  // placer ces lignes de code au début de la fonction /!\
    
  /* suite de la fonction */
  document.getElementById("divEnfant").className = "divOut";
}
 
//-->
</script>
 
</head>
 
<body>
 
<div id="divParent" onmouseover="overParent()" onmouseout="outParent()" class="divOut">
  <div id="divEnfant" onmouseover="overEnfant()" onmouseout="outEnfant()"  class="divOut">
  &nbsp;
  </div>
</div>
 
 
<div id="messageSortie"></div>
<div id="messageSortie2"></div>
 
</body>
</html>

Ce script fonctionne sauf quand il s'agit de passer de l'élément parent vers l'élément enfant. La fonction outParent() est exécutée : le message "vous êtes sortis..." s'affiche.

Visuellement, toutefois on ne voit pas cette exécution, les bordures des div changent de couleurs alternativement.

Comment éviter l'exécution de outParent() lors du passage du div parent vers le div enfant ? Mais autoriser l'exécution de cette fonction lorsque je sors du div parent.

**Maxoo** · 05/08/2008, 15h37

On est deux à chercher dessus, et je voulais préciser :
- sans utiliser de timer : car c'est vraiment crado comme méthode
- ni stoppropagation ni cancelbubble, surtout car ça ne fonctionne pas

Enfin voila, on est bloqué à ce niveau, car outParent est toujours appelé si je vais sur le divEnfant.

J'ai cherché dans des frameworks style prototype, ils n'ont rien non plus de fait. Ce que je trouve bizarre ...

**Auteur** · 05/08/2008, 15h46

Je vais plus précis sur un point :

La fonction outParent() est exécutée lors du passage du div parent vers le div enfant et réciproquement. Le but est surtout d'éviter cette exécution lors du passage de l'un vers l'autre mais d'autoriser l'exécution de la fonction lorsque l'on sort du div parent.

C'est surtout à ce niveau que ça coince.

**Maxoo** · 05/08/2008, 15h54

Envoyé par Auteur

Je vais plus précis sur un point :

La fonction outParent() est exécutée lors du passage du div parent vers le div enfant et réciproquement. Le but est surtout d'éviter cette exécution lors du passage de l'un vers l'autre mais d'autoriser l'exécution de la fonction lorsque l'on sort du div parent.

C'est surtout à ce niveau que ça coince.

Oui, d'ailleurs ce code (qui t'appartiens, mais que j'ai tuné) le montre bien.
baladez votre souris, et vous verrez ...

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

**Auteur** · 05/08/2008, 16h18

A part mettre un timer de très courte durée (entre 10 et 20ms) sur outParent(), je vois vraiment pas comment résoudre le problème.

Le timer sera arrêté lorsque l'on entre dans le div enfant.

Tu ne veux vraiment pas de timer ? 10ms c'est très court...

**Maxoo** · 05/08/2008, 16h24

Envoyé par Auteur

A part mettre un timer de très courte durée (entre 10 et 20ms) sur outParent(), je vois vraiment pas comment résoudre le problème.

Le timer sera arrêté lorsque l'on entre dans le div enfant.

Tu ne veux vraiment pas de timer ? 10ms c'est très court...

Bah disons que un timer c'est juste pas propre. et si j'ai beaucoup de div dans mon div principale, ça va appeler pleins de processus javascript et je pense que le navigateur va lagguer ...

**Auteur** · 05/08/2008, 16h25

Tu as combien de div imbriqués ?

**Maxoo** · 05/08/2008, 16h30

Envoyé par Auteur

Tu as combien de div imbriqués ?

Ca ne marche pas non plus avec les a, des span, strong, enfin n'importe quel élément... Et comme j'intégre dans un div un équivalent de page web.

On va dire 100 ou 200 élements, voili voilo

**Auteur** · 05/08/2008, 16h34

Tu ne pouvais pas gérer des onclick ??

Là au moins j'ai un truc qui marche sur n'importe quelle balise

**Sub0** · 05/08/2008, 16h37

Détecter la position de la souris sur tout le document et de simuler les evénements en fonction des positions et dimensions des conteneurs vous conviendrait ?
Par contre, cela implique de définir la position & dimensions des divs...

**Auteur** · 05/08/2008, 16h41

Envoyé par Sub0

Détecter la position de la souris sur tous le document et de simuler les evénements en fonction des positions et dimensions des conteneurs vous conviendrait ?
Cela implique de définir la position & dimensions des divs...

Le gros problème est chaque navigateur a ses propres fonctions qui retournent les coordonnées de la souris

Sans compter que selon le doctype utilisé ces même fonctions ne retournent pas les mêmes valeurs.

**Sub0** · 05/08/2008, 16h47

je pense avoir trouvé la solution à votre problème :
Il faut utiliser des booleans pour mémoriser l'evènement et utiliser uniquement ces états, exemple :

Code :

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
<!--
var in1=false;
...
//-->
</script>
<div onmouseover="in1=true;" onmouseout="in1=false;">
</div>

Puis utiliser le onmousemove du document pour simuler les evènements...

**Maxoo** · 05/08/2008, 16h56

Yep, de plus j'avais envie de faire un bête div qui à un onmouseout, et ça serait simple et propre.

Enfin je pensais que ça serait simple ...

je suis sur que ça peut se gérer ... on est pas les premier à tomber sur ce problème quand même ...

**Maxoo** · 05/08/2008, 16h58

Envoyé par Sub0

je pense avoir trouvé la solution à votre problème :
Il faut utiliser des booleans pour mémoriser l'evènement et utiliser uniquement ces états, exemple :

Code :

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
<!--
var in1=false;
...
//-->
</script>
<div onmouseover="in1=true;" onmouseout="in1=false;">
</div>

Puis utiliser le onmousemove du document pour simuler les evènements...

Euh ... tu pourrais faire un exemple concret ?? onmousemove je vois pas comment l'utiliser

**Auteur** · 05/08/2008, 17h00

Je crois que j'ai un truc

Patientez encore un petit peu

**Sub0** · 05/08/2008, 17h02

A paufiner selon vos besoins...

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
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
var in1,in2,in3=false;
function mouseposition(){
 var str='';
 if(in1){ str=str+'->1';
   if(in2){ str=str+'->2';
     if(in3){ str=str+'->3';
     }
   }
 }
 document.getElementById("idDiv").innerHTML=str;
}
 
document.onmousemove=mouseposition;
//-->
</script>
</head>
<body>
<div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;" onmouseover="in1=true;" onmouseout="in1=false;">
div 1
<div style="width: 100px; height: 100px; border: 1px #AAAAAA solid; margin:30px;" onmouseover="in2=true;" onmouseout="in2=false;">
div 2
<div style="width: 50px; height: 50px; border: 1px #AAAAAA solid; margin:15px;" onmouseover="in3=true;" onmouseout="in3=false;">
div 3
</div></div></div>
<div id="idDiv"></div>
</body>
</html>

Envoyé par Auteur

Je crois que j'ai un truc

Patientez encore un petit peu

Trop tard!

**Auteur** · 05/08/2008, 17h14

châpeau

Seul truc :

Code javascript :

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

document.onmousemove=mouseposition;

je n'aime pas trop ce genre d'écriture. Je préfère de loin :

Code html :

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

<body omousemove="mouseposition()">

**Maxoo** · 05/08/2008, 17h18

C'est pas un peu bourrin ?
genre le javascript est tout le temps en train de bourriner pour trouver le mousemove ? Ou ça fait pareil pour un onmouseover ?

Moi je voyais l'intérêt d'un onmouseover qui ne fait appel qu'un fois quand il faut à la fonction ...

**Maxoo** · 05/08/2008, 17h19

Euh auteur je veux bien voir ce que tu aurais pondu aussi ... faut toujours avoir pleins d'idées

**Auteur** · 05/08/2008, 17h26

Envoyé par Maxoo

Euh auteur je veux bien voir ce que tu aurais pondu aussi ... faut toujours avoir pleins d'idées

ben, c'est moins bien

:

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
<!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">
<!--
#divParent{
  width: 200px; 
  height: 200px;
}
#divEnfant{
  width: 100px; 
  height: 100px;
  margin:30px;
}
 
.divOver{
  border: 1px #0000FF solid;
}
.divOut{
  border: 1px #AAAAAA solid;
}
-->
</style>
 
 
<script type="text/javascript">
<!--
var dansDivEnfant = false;
 
function evMove(objet)
{
  if (dansDivEnfant)
  {
    dansDivEnfant = false;
    return false;
  }
  
  if (objet.id.toLowerCase()=="divenfant")
  {
    dansDivEnfant = true;
    fonctionDivEnfant();
  }
  else
  {
    fonctionDivParent();
  }
}
 
function fonctionDivEnfant()
{
  document.getElementById("divParent").className = "divOut";
  document.getElementById("divEnfant").className = "divOver";
  
  
  document.getElementById("messageSortie").innerHTML = "vous êtes dans le div enfant";
}
 
function fonctionDivParent()
{
  document.getElementById("divParent").className = "divOver";
  document.getElementById("divEnfant").className = "divOut";
 
  
  document.getElementById("messageSortie").innerHTML = "vous êtes dans le div parent";
}  
 
function outParent()
{
  document.getElementById("divParent").className = "divOut";
  
  
  document.getElementById("messageSortie").innerHTML = "vous êtes sortis !";
}
 
//-->
</script>
 
</head>
 
<body>
 
<div id="divParent" onmousemove="evMove(this)" onmouseout="outParent()" class="divOut">
  <div id="divEnfant" onmousemove="evMove(this)" class="divOut">
  &nbsp;
  </div>
</div>
 
 
<div id="messageSortie"></div>
 
</body>
</html>