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 ???

portée d'un event

JavaScript

Vue hybride

Discussions similaires

Partager

Partager