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

limiter les Actions javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager