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 ...

onmouseover onmouseout sur des éléments imbriqués

JavaScript

Vue hybride

Discussions similaires

Partager

Partager