FireFox : onmousedown, onmouseup

**Auteur** · 13/01/2006, 23h50

bonsoir,

voici un petit script :

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.Conteneur{
float: left;
position: absolute;
left: 10px;
top: 10px;
width: 180px;
border-style: solid;
border-width: 1px;
border-color: #AAAAAA;
}
 
.Bouton{
padding: 2px;
border-style: outset;
border-width: 2px;
width: 150px;
text-align: center;
cursor: pointer;
margin: 2px;
border-color: #DDDDFF;
background-color: #DDDDFF;
color: #000000;
}
 
.DivBlaBla{
padding: 10px;
margin: 0px;
}
 
#idDiv1{
display: block;
float: left;
position: absolute;
left: 220px;
right: 100px;
top: 20px;
}
 
#idDiv2{
display: none;
float: left;
position: absolute;
left: 220px;
right: 100px;
top: 20px;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function BoutonOut(obj)
{
 var Bt = obj;
 Bt.style.padding = "2px";
 Bt.style.borderStyle = "outset";
 
}
 
function BoutonDown(obj)
{
 var Bt = obj;
 Bt.style.paddingLeft = "3px";
 Bt.style.paddingTop = "3px";
 Bt.style.paddingRight = "1px";
 Bt.style.paddingBottom = "1px";
 Bt.style.borderStyle = "inset";
 
 //return false;
}
 
function BoutonUp(obj)
{
 var Bt = obj;
 Bt.style.padding = "2px";
 Bt.style.borderStyle = "outset";
 
 Action(obj);
 
 //return false;
}
 
function Action(obj)
{
 if (obj.id=="idBt1")
 {
  document.getElementById("idDiv2").style.display="none";
  document.getElementById("idDiv1").style.display="block";
  document.getElementById("idBt2").style.display="block";
 }
 
 if (obj.id=="idBt2")
 {
  document.getElementById("idDiv2").style.display="block";
  document.getElementById("idDiv1").style.display="none";
  obj.style.display="none";
 }
 
}
//-->
</script>
 
</head>
 
<body>
<div class="Conteneur">
<div id="idBt1" class="Bouton" onmouseout="BoutonOut(this)" onmousedown="BoutonDown(this)" onmouseup="BoutonUp(this);">
Texte du Bouton 1
</div>
 
<div id="idBt2" class="Bouton" onmouseout="BoutonOut(this)" onmousedown="BoutonDown(this)" onmouseup="BoutonUp(this);">
Texte du Bouton 2
</div>
<div class="DivBlaBla">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
</div>
 
<br><br><br>
<div id="idDiv1">
Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1 Texte du paragraphe 1
</div>
<br><br>
<div id="idDiv2">
Texte du paragraphe 2 Texte du paragraphe 2 Texte du paragraphe 2 Texte du paragraphe 2
</div>
 
</body>
 
</html>

le bouton 1 sert à afficher le paragraphe 1 et le bouton 2 sert à affiche le paragraphe 2.
Lors du clic sur le bouton 2, j'affiche le paragraphe 2 et j'efface de la page le bouton 2. Sous IE pas de souci. Par contre sous FireFox, lorsque je promène la souris dans le cadre "bla bla", le texte est surligné (alors que je ne clique sur aucun bouton). J'ai essayé un "return true" ou "return false", mais sans résultat.

-Est-ce que quelqu'un peut m'expliquer pourquoi ?
-Et comment je peux supprimer ce phénomène ?

**siddh** · 13/01/2006, 23h58

euh moi en tout cas ca le fais pas sur firefox 1.5

**Auteur** · 14/01/2006, 00h56

j'ai la version 1.0.6 : un bug de cette version ??

**siddh** · 14/01/2006, 01h18

peut etre

**javatwister** · 14/01/2006, 10h23

le up sur un élément supprimé du flux html n'est pas enregistré... logique non?

**Auteur** · 14/01/2006, 12h36

Envoyé par javatwister

le up sur un élément supprimé du flux html n'est pas enregistré... logique non?

tout à fait.
comment je peux remèdier à ce problème ? Comment forcer cet enregistrement ?

**Auteur** · 14/01/2006, 12h55

:trouve:

il suffit de rajouter une tempo !!
le code javascript devient :

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
 
var objTest;   //variable globale
 
function BoutonUp(obj)
{
 var Bt = obj;
 Bt.style.padding = "2px";
 Bt.style.borderStyle = "outset";
 
 Action(obj);
 
 //return false;
}
 
function Action(obj)
{
 if (obj.id=="idBt1")
 {
  document.getElementById("idDiv2").style.display="none";
  document.getElementById("idDiv1").style.display="block";
  document.getElementById("idBt2").style.display="block";
 }
 
 if (obj.id=="idBt2")
 {
  document.getElementById("idDiv2").style.display="block";
  document.getElementById("idDiv1").style.display="none";
 
  objTest = obj;          //obj est placé dans la variable globale objTest
  setTimeout("CacheBouton()",100); // Temporisation
 }
 
}
 
function CacheBouton()
{
  objTest.style.display="none";
}

comme ça l'événement up a le temps de se terminer. Puis je supprime du flux mon bouton grâce à la fonction CacheBouton() appellée après 100ms.

[Edit] je continue néanmoins à surveiller le sujet. Si vous avez une autre solution, n'hésitez pas à la poster.
Merci
[/Edit]

**javatwister** · 14/01/2006, 14h53

bon je te balance ça; c'est le dawa mais l'esprit est là:

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
<script type="text/javascript"> 
<!-- 
 
function BoutonOut(obj){ 
obj.style.padding = "2px"; 
obj.style.borderStyle = "outset"; 
} 
 
var flag;
 
function BoutonDown(obj){ 
flag= obj.id=="idBt1" ? false : obj;
 
obj.style.paddingLeft = "3px"; 
obj.style.paddingTop = "3px"; 
obj.style.paddingRight = "1px"; 
obj.style.paddingBottom = "1px"; 
obj.style.borderStyle = "inset"; 
 
if(flag){
	document.getElementById("idDiv2").style.display="block"; 
	document.getElementById("idDiv1").style.display="none"; 
	window.focus(); 
} 
else{
document.getElementById("idBt2").style.cursor="pointer"
}
 
} 
 
function BoutonUp(obj){
obj.style.padding = "2px"; 
obj.style.borderStyle = "outset"; 
document.getElementById("idDiv2").style.display="none"; 
document.getElementById("idDiv1").style.display="block"; 
document.getElementById("idBt2").style.display="block"; 
} 
 
 
onfocus=function(){
	if(flag){ 
		flag.style.padding = "2px"; 
		flag.style.borderStyle = "outset";
		flag.style.display="none";
	}
}
 
//--> 
</script> 
 
</head> 
 
<body> 
<div class="Conteneur""> 
<div id="idBt1" class="Bouton" onmouseout="BoutonOut(this)" onmousedown="BoutonDown
 
(this)"onmouseup="BoutonUp(this);"> 
Texte du Bouton 1 
</div> 
 
<div id="idBt2" class="Bouton" onmousedown="BoutonDown(this)"> 
Texte du Bouton 2 
</div> 
<div class="DivBlaBla"> 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</div> 
</div>

**Auteur** · 14/01/2006, 19h00

parfait, merci.

mais je ne vois pas très bien la necessité du window.focus();
Est-ce pour forcer l'appel de l'événement onfocus ?

**javatwister** · 15/01/2006, 10h28

en fait, c'est très prosaïque:
le but était de trouver un moyen pour désactiver le mousedown alors que l'élément avait disparu; je me suis dit que donner le focus à un autre élément de la page était une solution;
tu utilises des div pour simuler des boutons (je ne vois pas trop pourquoi mais bon...); comme un div n'admet pas de "focus", je donne le focus à la fenêtre courante, et ça me permet de lancer tranquillement les instructions concernant le bouton 2;

**Auteur** · 16/01/2006, 11h56

Envoyé par javatwister

en fait, c'est très prosaïque:
le but était de trouver un moyen pour désactiver le mousedown alors que l'élément avait disparu; je me suis dit que donner le focus à un autre élément de la page était une solution;

ok

Envoyé par javatwister

tu utilises des div pour simuler des boutons (je ne vois pas trop pourquoi mais bon...);

y'a des jours comme ça ....

Et puis ça fait travailler l'esprit.