limiter les Actions javascript

**gunth** · 18/09/2008, 20h42

Bonsoir,

J'ai une petite question en javascript...

Voila j'ai un DIV (test2) inséré dans un autre (test1), sur ce div test1 je met une action javascript "onmouseover" ce qui marche très bien le problème c'est que quand je survole le div test2 il ré appel la fonction showHide, est ce possible de juste mettre l'action sur le div test1 et non pas sur le div test2

Voici le code d'exmple

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
	function $(idDiv){
		return document.getElementById(idDiv);
	}
 
	function showHide(idDiv){
		console.log('coucou');
	}
 
	window.onload = function(){
		$('test1').onmouseover = function(){
			showHide('test1');
		}
	}
</script>
</head>
 
<body>
	<div id="test1" style="border:1px solid #000">
    	content1
        <div id="test2" style="border:1px solid #000">
        	content2
        </div>
    </div>
</body>
</html>

Merci d'avance

**Auteur** · 18/09/2008, 23h25

bonjour,

d'après le bout code posté, l'événement onmouseover est uniquement sur le div test1 pas sur div test2. Maintenant pourquoi l'événement se déclenche-t-il sur le div test2 ?

Voilà ce qu'il se passe :

tu entres dans test 1 => déclenchement du onmousover (logique) et exécution de showHide() ;
quand tu entres dans test 2 il se passe 3 choses :
1. tu sors de test 1 ;
2. tu entres dans test 2 ;
3. comme test 2 se trouve dans test 1, tu entres dans test 1 (tu étais sorti de test 1 de en (a)) => le onmouseover est à nouveau déclenché, ta fonction showHide() est à nouveau exécutée.

Il faut gérer le onmouseover sur tes deux div. Voilà une solution :

Code x :

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
<!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;
  border: 1px #AAAAAA solid;  
}
#divEnfant{
  width: 100px; 
  height: 100px;
  margin:30px;
  border: 1px #AAAAAA solid;  
}
-->
</style>
 
 
<script type="text/javascript">
<!--
var overDivEnfant = false;

function evOverDiv(objet)
{
  if (overDivEnfant)
  {
    overDivEnfant = false;
    return false;
  }

  if (objet.id.toLowerCase()=="divenfant")
  {
    overDivEnfant = true;
    fonctionDivEnfant();
  }
  else
  {
    fonctionDivParent();
  }
}

function fonctionDivEnfant()
{
  document.getElementById("messageSortie").innerHTML += "vous êtes dans le div enfant<br>";
}

function fonctionDivParent()
{
  document.getElementById("messageSortie").innerHTML += "vous êtes dans le div parent<br>";
}
//-->
</script>
 
</head>
 
<body>

<div id="divParent" onmouseover="evOverDiv(this)">
  <div id="divEnfant" onmouseover="evOverDiv(this)">
  &nbsp;
  </div>
</div>

<div id="messageSortie"></div>

</body>
</html>

La variable overDivEnfant passe à true quand tu survoles le div enfant (onmouseover sur le div enfant) et tu exécutes fonctionDivEnfant().

Pour éviter le déclenchement de l'événement onmouseover sur le parent (propagation des événements), lors du second appel de la fonction evOverDiv(), la variable overDivEnfant étant à true, on sort de la fonction et évite ainsi l'exécution de la fonction fonctionDivParent().

Si tu survoles uniquement le div parent la variable overDivEnfant reste toujours à false et seule la fonction fonctionDivParent() est exécutée.

En faisant une recherche dans le forum, tu trouveras plus de détails sur le mode de propagation des événements dans des éléments imbriqués.

**gunth** · 19/09/2008, 10h05

et cette fonction (stopPropagation ) ne fait pas la même chose ?

**SpaceFrog** · 19/09/2008, 10h24

ce n'est pas un évènement ...

**gunth** · 19/09/2008, 10h38

le problème que j'ai actuellement c'est que j'aimerais savoir quand est ce que on sort du div parent, mais dans ce cas ci si je rentre dans le div enfant, il va me dire que je sort du div parent hors que en faite visuellement non, comment faire alors pour savoir que je sort réellement du div parent et que je ne rentre pas dans le div enfant...

**SpaceFrog** · 19/09/2008, 10h41

avec un setTimeout et un clearTimeout

tu set un timeout lorsque tu quittes le parent et tu l'annules lorsque tu rentre dans l'enfant.
Ainsi si la focntion du setTimout abouti c'est que tu quiite le parent sasn rentrer dans l'enfant

**gunth** · 19/09/2008, 10h45

sans vouloir abuser, tu aurais un code d'exemple pour me mettre sur la piste ?

**SpaceFrog** · 19/09/2008, 11h20

Si si c'est abuser ...

mais bon dans ma grande générosité ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
var launched
function Do(){
launched=setTimeout(function(){what()},100)
}
function what(){
alert('je sors complètement');
}
</script>
</head>
 
<body>
<div style="height:300px;width:200px;background-color:yellow;text-align:center;padding-top:50px;" onmouseout="Do()" onmouseover="clearTimeout(launched);"><div style="positon:relative:top:10px;width:10px;background-color:blue;" onmouseover="clearTimeout(launched);"  >coucou</div></div>
</body>

qui peut aussi se traiter juste avec un flag et un petit délai :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type='text/javascript'>
var Parent=true
var launched
function what(){
if(Parent){alert('je sors complètement');}
}
</script>
</head>
<body>
<div style="height:300px;width:200px;background-color:yellow;text-align:center;padding-top:50px;" onmouseout="Parent=true;setTimeout(function(){what()},100)" onmouseover="Parent=false;"><div style="positon:relative:top:10px;width:10px;background-color:blue;" onmouseover="Parent=false;"  >coucou</div></div>
</body>

**Auteur** · 19/09/2008, 12h26

la gestion des événements onmouseover / onmouseout dans des éléments imbriqués a été évoqué dans cette discussion :
http://www.developpez.net/forums/d59...nts-imbriques/

Le sujet a été présenté sous forme de défi, des codes divers ont été présentés avec leurs avantages et leur inconvénients.