Problème d'évenement ! Fermeture non demandée.

Version imprimable

Bonjour,

J'apprend le javascript depuis hier et j'ai donc commencer un peu a trifouiller un code que j'ai trouvé sur un site. Je souhaite en faite afficher une fenetre DHTML quand on clique droit et que celle-ci se ferme quand la souris sort de la fenetre. Mais voila, il y a un bug et aucune erreur ne m'informe du problème. La fenetre se ferme quand on bouge la souris dans celle-ci.

Voici mon code entre head et /head :

Code:

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
<style type="text/css">
#bloc{
	z-index:500;
	position:absolute;
	border:1px solid #9D9DA1;
	background-color:#ffffff;
	cursor:default;
	visibility:hidden;
}
</style>
 
<script language="JavaScript1.2">
// Fonction position souris.
function souris_position(a){
	if(navigator.appName.substring(0,3) == "Net"){
		position_x = a.pageX;
		position_y = a.pageY;
	}else{
		position_x = event.x+document.body.scrollLeft;
		position_y = event.y+document.body.scrollTop;
	}
}
 
function bloc_open(){
	document.getElementById("bloc").style.top = position_y-5;
	document.getElementById("bloc").style.left = position_x-5;
	document.getElementById("bloc").style.visibility ="visible";
	return(false);
}
 
function bloc_close(){
	document.getElementById("bloc").style.top = 0;
	document.getElementById("bloc").style.left = 0;
	document.getElementById("bloc").style.visibility ="hidden";
}
 
if(navigator.appName.substring(0,3) == "Net")document.captureEvents(Event.MOUSEMOVE);
</script>

Entre body et /body :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="bloc" onMouseOut="bloc_close();">
<table style="width:200px;"><tr>
<td style="background-color:#566A99;
font-family:Verdana; font-size:10pt; color:#FFFFFF; font-weight:bold;">&nbsp;Menu</td>
</tr><tr>
<td>a</td>
</tr></table></div>
 
<script language="JavaScript">
document.onmousemove = souris_position;
document.oncontextmenu = bloc_open;
</script>

Merci de votre aide !

26/02/2006, 22h31
m@t

En fait, je pense qu'on peut bouger la souris tant qu'on ne sort pas de la cellule de tableau (menu).. Quand on passe d'une cellule à l'autre, apparement, le navigateur considère que l'on n'est plus dans le bloc.

En effet, il faudrait chercher à supprimer les espaces entre les cellules, j'ai essayé, mais ça n'a rien donné...

Sinon il suffit d'utiliser autre chose qu'un tableau et cela fonctionne parfaitement :wink:

J'ai résolu ton problème comme ceci :

Code:

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
 
<html>
<head>
<style type="text/css">
#bloc{
   z-index:500;
   position:absolute;
   border:1px solid #9D9DA1;
   background-color:#ffffff;
   cursor:default;
   visibility:hidden;
}
</style>
 
<script language="JavaScript1.2">
//initalisation
gn_ref=null;
 
// Fonction position souris.
function souris_position(a){
   if(navigator.appName.substring(0,3) == "Net"){
      position_x = a.pageX;
      position_y = a.pageY;
   }else{
      position_x = event.x+document.body.scrollLeft;
      position_y = event.y+document.body.scrollTop;
   }
}
 
function bloc_open(){
   document.getElementById("bloc").style.top = position_y-5;
   document.getElementById("bloc").style.left = position_x-5;
   document.getElementById("bloc").style.visibility ="visible";
   return(false);
}
 
function bloc_close(){   
   document.getElementById("bloc").style.top = 0;
   document.getElementById("bloc").style.left = 0;
   document.getElementById("bloc").style.visibility ="hidden";
   clearInterval(gn_ref);
   gn_ref=null;
}
 
function bloc_startclose(){
   if(gn_ref==null)
   {
     gn_ref=setInterval("bloc_close()",100);
   }
}
function bloc_stopclose(){
   if(gn_ref!=null)
   {
      clearInterval(gn_ref);
      gn_ref=null;
   }
}
 
if(navigator.appName.substring(0,3) == "Net")document.captureEvents(Event.MOUSEMOVE);
</script>
</head>
</html>
<body>
<div id="bloc" onMouseOut="bloc_startclose();" onMouseOver="bloc_stopclose();">
<table style="width:200px;border:1px solid black;"><tr>
<td style="background-color:#566A99;font-family:Verdana; font-size:10pt; color:#FFFFFF; font-weight:bold;">&nbsp;Menu</td></tr>
<tr><td>a</td></tr>
</table>
</div>
 
<script language="JavaScript">
document.onmousemove = souris_position;
document.oncontextmenu = bloc_open;
</script>
</body>

Un problème connu dans la création de menu en dhtml avec plusieurs divs, mais das ce cas avec un seul div, je comprends pas bien le mouseout qui se déclenche :/

27/02/2006, 10h18
killprog

Bonjour,

Merci, sa marche ! Par contre étand novice, je voudrais savoir ce qu'est : clearInterval, setInterval ? Ils n'en parlent pas dans le livre.

Merci de votre aide !