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.