portée d'un event

**bibile** · 09/06/2006, 14h47

avec le code ci-dessous, j'ai un <div> qui a un event onmouseover.
Lorsque la souris passe dessus, ca incremente le chiffre du haut.
Lorsque la souris quitte la <div>, ca fait un onmouseout, et ca incremente le 2ieme chiffre.
ca marche tres bien.
par contre, si la souris passe sur le <input> qui est dans la <div>, ca fait un mouseout !
pourtant, l'<input> est bien dans la <div> !
comment est-ce que je peux faire pour que ca ne lance pas un mouseout de la <div> ?

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
33
34
35
<HTML>
<HEAD>
<script language="Javascript">
  function p2i(div_from) {
    oP=document.getElementById("para1").innerHTML;
    document.getElementById("para1").innerHTML=Number(oP)+1;
 
    div_from.onmouseover=function(){};
    div_from.setAttribute("onmouseover","");
 
    div_from.onmouseout = function() {i2p(this);};
  }
  function i2p(div_from) {
    oP=document.getElementById("para2").innerHTML;
    document.getElementById("para2").innerHTML=Number(oP)+1;
 
    div_from.onmouseout=function(){};
    div_from.setAttribute("onmouseout","");
 
    div_from.onmouseover = function() {p2i(this);};
  }
  </script>
</head>
 
<body>
  <div onmouseover="p2i(this);" style="padding:50px;margin:50px;background-color:red;height:100px;width:400px;">
 
    <input type="text" size=50 value="hello">
  </div>
 
  <p id="para1">0</p>
  <p id="para2">0</p>
 
</body>
</html>

**Auteur** · 09/06/2006, 16h01

bonjour,

je te propose une alternative :
cela consiste à déterminer les dimensions du div lors du chargement de la page puis à ne prendre en compte que les événements qui ont lieu dans la plage de coordonnées.

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
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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
div{
width: 300px;
border: 1px #AAAAAA solid;
padding: 50px;
text-align: center;
margin: 100px;
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
var status=false;
var c1=0, c2=0;
var T, L, H, W;
 
function testCoord(X,Y)
{
 return (Y>T && Y<T+H && X>L && X<L+W);
}
 
function MouseOver(ev)
{
 var X, Y;
 X = parseInt(ev.clientX) + parseInt(document.body.scrollLeft);
 Y = parseInt(ev.clientY) + parseInt(document.body.scrollTop);
 
 if (testCoord(X,Y) && !status)
 {
   c1++;
   document.getElementById("p1").innerHTML="Over= "+c1;
   status=true;
 }
}
function MouseOut(ev)
{
 var X, Y;
 X = parseInt(ev.clientX) + parseInt(document.body.scrollLeft);
 Y = parseInt(ev.clientY) + parseInt(document.body.scrollTop);
 
 if (!testCoord(X,Y) && status)
 {
   c2++;
   document.getElementById("p2").innerHTML="Out= "+c2;
   status=false;
 }
 
}
function dimDiv()
{
 var e = document.getElementById("idDiv");
 T = e.offsetTop;
 L = e.offsetLeft;
 W = e.offsetWidth;
 H = e.offsetHeight;
 document.getElementById("p0").innerHTML="Height= "+H+" ; Width= "+W+" ; Top= "+T+" ; Left=" +L;
}
//-->
</script>
 
 
</head>
 
<body onload="dimDiv()">
 
<div id="idDiv" onmouseover="MouseOver(event)" onmouseout="MouseOut(event)">
<input type="text" value="Par Defaut" size="20" maxlength="10">
 
</div>
 
<p id="p0"></p>
<p id="p1"></p>
<p id="p2"></p>
 
</body>
 
</html>

-La variable status n'autorise le out que si le over a eu lieu et réciproquement (=1 événement à la fois).
-Les valeurs H, W, T, et L sont légèrement différentes d'un navigateur à l'autre : cela vient sans doute du fait que certains tiennent compte ou non de la bordure du div.

Je dois avouer que la façon dont tu procèdes me laisse un peu perplexe : lors du over tu retires l'événement over et tu rétablis l'événement out. Et tu fais le contraire l-ors de l'événement out.

**bibile** · 09/06/2006, 16h12

c'est vrai que mon systeme d'event qui s'ajoute et s'enleve est idiot.
ca donne ca sans:

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
<HTML>
<HEAD>
<script language="Javascript">
function p2i(div_from) {
  oP=document.getElementById("p1").innerHTML;
  document.getElementById("p1").innerHTML=Number(oP)+1;
}
function i2p(div_from) {
  oP=document.getElementById("p2").innerHTML;
  document.getElementById("p2").innerHTML=Number(oP)+1;
}
</script>
 
</head>
<body>
<div onmouseover="p2i(this);" onmouseout="i2p(this);" style="padding:50px;margin:50px;background-color:red;height:100px;width:400px;">
<input type="text" size=50 value="hello">
</div>
<p id="p1">0</p>
<p id="p2">0</p>
</body>
</html>

merci pour ton script qui marche parfaitement !
ca va juste devnir un peu moins facile pour moi. parce que le nombre de <div> va varier au fil du temps, sans refaire de onLoad de la page et leur taille aussi !
c'est pour ca que j'essaye d'accrocher mes event aux <div>, directement. comme ca, grace au parametre "this", ca pourrait marcher simplement !
si ce n'est ce probleme de "portée" de l'event et le fait qu'il active le onmouseout lorsqu'on passe sur l'<input> qui est dans la <div> !

**SpaceFrog** · 09/06/2006, 16h51

sinon en testant le parent ?

**bibile** · 09/06/2006, 18h26

Envoyé par SpaceFrog

sinon en testant le parent ?

est-ce que tu peux preciser stp ?
tu veux mettre un onmouseover sur le <input> et que celui-ci test son parent ?

**Auteur** · 09/06/2006, 23h16

voici le script avec 2 div. J'ai ajouté un paramètre aux fonctions MouseOut et MouseOver. Maintenant les dimensions du div sont déterminées lors de l'événement.

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
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
93
94
95
96
97
98
99
100
101
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.div1{
width: 500px;
border: 1px #AAAAAA solid;
padding: 50px;
text-align: center;
margin: 100px;
}
 
.div2{
width: 300px;
border: 1px #AAAAAA solid;
padding: 50px;
text-align: center;
margin: 10px;
}
//-->
</style>
 
 
<script type="text/javascript">
<!--
var status=false;
var c1=0, c2=0;
var T, L, H, W;
 
function testCoord(X,Y)
{
 return (Y>T && Y<T+H && X>L && X<L+W);
}
 
function MouseOver(obj,ev)
{
 dimDiv(obj);
 
 var X, Y;
 X = parseInt(ev.clientX) + parseInt(document.body.scrollLeft);
 Y = parseInt(ev.clientY) + parseInt(document.body.scrollTop);
 
 if (testCoord(X,Y) && !status)
 {
   c1++;
   document.getElementById("p1").innerHTML="Over= "+c1;
   status=true;
 }
}
function MouseOut(obj,ev)
{
 dimDiv(obj);
 
 var X, Y;
 X = parseInt(ev.clientX) + parseInt(document.body.scrollLeft);
 Y = parseInt(ev.clientY) + parseInt(document.body.scrollTop);
 
 if (!testCoord(X,Y) && status)
 {
   c2++;
   document.getElementById("p2").innerHTML="Out= "+c2;
   status=false;
 }
 
}
function dimDiv(obj)
{
 //var e = document.getElementById("idDiv");
 var e = obj;
 T = e.offsetTop;
 L = e.offsetLeft;
 W = e.offsetWidth;
 H = e.offsetHeight;
 document.getElementById("p0").innerHTML="Height= "+H+" ; Width= "+W+" ; Top= "+T+" ; Left=" +L;
}
//-->
</script>
 
 
</head>
 
<body>
 
<div class="div1" onmouseover="MouseOver(this,event)" onmouseout="MouseOut(this,event)">
<input type="text" value="Par Defaut" size="20" maxlength="10">
</div>
 
 
<div class="div2" onmouseover="MouseOver(this,event)" onmouseout="MouseOut(this,event)">
<input type="text" value="Par Defaut" size="20" maxlength="10">
</div>
 
<p id="p0"></p>
<p id="p1"></p>
<p id="p2"></p>
 
</body>
 
</html>

Envoyé par SpaceFrog

sinon en testant le parent ?

J'y pense : si tu désactivais les événements onmouseout et onmouseover de l'input contenu dans le div ???

**bibile** · 10/06/2006, 14h14

merci Auteur !!!
ca fait l'affaire a merveille

pour ce qui est du test du Parent de SpaceFrog, je pense que ca peut etre aussi une bonne idee. qque chose comme mettre un onmouseover sur l'<input> qui lance la focntion mouseOver() et qui regarde le status du parent (la <div>).

mais je conserve ton idee d'utilisation des coordonnées, ca marche vraiment bien !

**bibile** · 10/06/2006, 23h51

je viens de lancer ton script sous IE.
y a des effets assez amusants.
si on rentre dans la <div> en allant tres doucement avec la souris, ca plante le script. apparement, y a un souci avec la position x,y de la souris par rapport au declanchement du onmouseover (en gros, l'event se declanche, mais la fonction testCoord(X,Y) donne FALSE).

mais bon, je vais bien reussir a le resoudre !

**Auteur** · 11/06/2006, 20h05

quelle drôle d'idée d'entrer lentement dans un div !

Quelle est l'épaisseur de la bordure du div ? Peut-être qu'il y a un état indéterminé où le navigateur ne sait pas s'il y a un mouse over ou un mouse out.

la fonction testCoord(X,Y) donne FALSE

c'est normal. la fonction renvoi le résultat d'un test (vrai ou faux).
Il faut avouer que j'étais de plus en plus sceptique quant à l'efficacité la méthode que je te propose : je pense que tu pourrais avoir également des surprises si le div a les attributs "float: left/right" ou "position:absolute/relative" définis.

Je vais essayer de revoir un peu tout ça.

**bibile** · 11/06/2006, 21h45

Envoyé par Auteur

Je vais essayer de revoir un peu tout ça.

t'embetes pas trop avec tout ca !
j'ai arrangé le code.
en gros, j'ai augmenté le champ de detection sur les onmouseover.
j'ai rajouté un flag pour verifier dans quelle etat est la DIV au moment de l'event.
ca rajoute une condition ici:

Code :

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

if (testCoord(X,Y) && !status && flag)

resultat, plus de pb.
le seul qui reste, c'est lorsque le usr declanche le onmouseover en pointant juste sur le bord (1 pixel) de la DIV. si il s'en va, ca ne declanche pas de mouseOut dans IE.
mais bon, il l'aura bien cherché ce usr !

**Auteur** · 12/06/2006, 18h41

deux scripts :

le 1er script te servira sans doute à comprendre le second : il affiche le comportement du navigateur face aux événements mouseover et mouseout de l'input et du div. Il y a des différences d'affichage entre IE et Firefox.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.div1{
width: 500px;
border: 1px #AAAAAA solid;
padding: 50px;
text-align: center;
margin: 10px;
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
var Source=new Array(),n=0;
 
function Mouse(ev,obj)
{
 var evType=ev.type.toLowerCase();
 var evSource=obj.tagName.toLowerCase();
 
 Source[n]=new Array();
 Source[n][0]=evSource;
 Source[n][1]=evType;
 document.getElementById("p0").innerHTML+=Source[n]+" / ";
 n++;
}
/*************************************************************/
 
//-->
</script>
 
</head>
 
<body>
<div class="div1" onmouseover="Mouse(event,this)" onmouseout="Mouse(event,this)">
<input onmouseover="Mouse(event,this)" onmouseout="Mouse(event,this)" type="text" value="Par Defaut" size="20" maxlength="10">
</div>
 
<p id="p0"></p>
 
</body>
 
</html>

voici le second script : comme tu as pu le remarquer avec le 1er script, lors du passage du div vers l'input tu as (avec IE):
div-mouseout / input-mouseover / div-mouseover
et inversement lors du passage input vers div.
Le script ci-dessous détecte le passage de l'un vers l'autre et bloque ainsi le mouseover ou le mouseout. Pour cela, il faut que les événements mouseover et mouseout aient lieu dans un intervalle de 20ms (cf. variable tempo). Si over et out sont à true dans cet intervalle de temps, tu passes de l'input vers le div ou du div vers l'input.

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
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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.div1, .div2{
width: 500px;
border: 1px #AAAAAA solid;
padding: 50px;
text-align: center;
margin: 10px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
 
var Over=false, Out=false;
var chrono=null;
var c1=0,c2=0, tempo=20;//temps de detection
 
function attente(arg)
{
 document.getElementById("p0").innerHTML=Over+" "+Out+" "+arg;
 chrono=null;
 if (arg==0 && (Over && !Out))
 {
  c1++;
  document.getElementById("p1").innerHTML="Over= "+c1;
 }
 if (arg==1 && (!Over && Out))
 {
  c2++;
  document.getElementById("p2").innerHTML="Out= "+c2;
 }
 
 Over=false;
 Out=false;
}
 
function MouseOver(ev,obj)
{
 Over=true;
 if (chrono==null)
 {
    chrono=setTimeout("attente(0)",tempo);
 }
}
 
function MouseOut(ev,obj)
{
  Out=true;
  if (chrono==null)
  {
     chrono=setTimeout("attente(1)",tempo);
  }
}
//-->
</script>
 
</head>
 
<body>
<div class="div1" onmouseover="MouseOver(event,this)" onmouseout="MouseOut(event,this)">
<input type="text" value="Par Defaut" size="20" maxlength="10">
</div>
 
<div class="div2" onmouseover="MouseOver(event,this)" onmouseout="MouseOut(event,this)">
<input type="text" value="Par Defaut" size="20" maxlength="10">
</div>
 
<p id="p0"></p>
<p id="p1"></p>
<p id="p2"></p>
 
</body>
 
</html>

**bibile** · 13/06/2006, 00h13

merci !!
Je n'aurais jamais pensé utiliser le setTimout()

par contre, ca s'eloigne un poil d'une solution exploitable pour mon appli.
pour simplifier la question du topic, j'ai occulté pas mal de fonctionnalités.

maintenant, j'ai qque chose qui me va pas trop mal.
j'ai encore qques effets de bords sous IE, mais bon...
des petits trucs amusants, comme sortir d'une DIV en allant sur la structure du browser (donc, en quittant la page, sans passer sur <body>).
mais bon, je pense que je risque de trouver des petits pbs comme celui la pendant longtemps.
du coup, j'ai changé de strategie et j'ai un systeme qui fait ce qu'il faut dans 98% des cas et qui a un mode de recuperation des actions du usr pour les 2% restant. c'est plus simple que d'optimiser les derniers details !

portée d'un event

JavaScript

Discussions similaires

Partager

Partager