Discussion :

[lejert]

Irremediablement, et sans arret ... arghhhh !!!

Voila le probleme :

J'aimerais lorsque je passe sur une cellule de mon tableau, effectuer certaines operations (voir code) ( -> onMouseOver ) et d'autres lorsque mon pointeur la quitte (-> onMouseOut).

Le probleme est que l'evenement onmouseout est aussi appele lorsque je suis encore dans la cellule !!!

Voyez le code :

Appel dans l'html :

Code :

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

1
2
3
4
5
6
 
<tr><td bgcolor="#DDDDDD" id="NewsCell"
onmouseover="mouseOnCellTable(this);"
onmouseout="mouseOutCellTable(this);">News</td>
</tr>
<tr>

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
 
function getObjInnerText(obj)
{ 
 if (obj.innerText) { // IE; 
 		return obj.innerText;
	} 
 
else if (obj.textContent) 
		{ 
			return obj.textContent; 
		} 
}
 
 
function mouseOnCellTable(obj)
{
	objText__ = getObjInnerText(obj);
	obj.innerHTML = "<i><u><b> " +  objText__ + "</i></u></b>";
	obj.style.background = '#DDDDDD';
 
	if (objText__ == 'News') 
		{
// Modif d'une autre cellule de ma page...			document.getElementById('MainCellContentDescription').innerHTML = NewsDescription; // -> variable globale
		}
 
	else if (objText__ == 'Dates')
		{
			document.getElementById('MainCellContentDescription').innerHTML = DatesDescription;
		}
 
 
	document.getElementById('MainCellContentDescription').style.background = '#DDDDDD';
}
 
function mouseOutCellTable(obj)
{
	objText__ = getObjInnerText(obj);
	alert('OUT!!!');
	obj.style.background = '#DDDDDD';
 
	obj.innerHTML = objText__;
	//alert(obj.textContent);
	document.getElementById('MainCellContentDescription').innerHTML = SelectedPageMessage;
	//else
	//	document.getElementById('MainCellContentDescription').innerHTML = WelcomeMessage;
}
 
</script>

L' alert 'box' 'OUT !' est appellée des que je survole le texte de la cellule !!!

Donc, j'arrive avec ma souris sur la cellule : OnMouseOver se declanche -> ok
MAIS etant toujours dans la cellule, des que je survole le texte l'evenement OnMouseOut se produit...

C'est assez embetant... et j'admet avoir mis du temps à comprendre quel etait exactement l'evenement produisant le onMouseOut...


Merci pour votre aide

[javatwister]

vois les méthodes! cancelBubble() (IE) et stopPropagation() de l'objet event;

[SpaceFrog]

JT pou rune fois tu as fait pire que moi

en fait l'explication de ce comportement est que tu rajoutes au pied de biche pardon avec innerHTML une balise dans le td ...
Donc se trouvant avec une nouvelle balise sous le curseur, le navigateur considère qu'il n'est plus sur le td et lance donc le onmouseout...

je ne sais pas si un cancelBubble resoudrait cela...
j'aurais tenté un truc plus violent du genre mattre le onmouseout dans la balise i ...

[Auteur]

bonjour,

voici une méthode pour éviter la succession de mouseover et mouseout sur un même élément :
http://www.developpez.net/forums/sho...d.php?t=300738

Par contre, le code risque d'être moins évident à implémenter si tu dois gérer les événements sur plusieurs éléments (tu dois savoir quel élément appelle quel événement).

vois les méthodes! cancelBubble() (IE) et stopPropagation() de l'objet event;

+1

[lejert]

en fait l'explication de ce comportement est que tu rajoutes au pied de biche pardon avec innerHTML une balise dans le td ...

Je m'en doutais un peu au vue des differentes pages que j'ai lues avant de poster ...

En fait je ne code que tres rarement javascript ( ). Ici je créée un nouveau site.

Le but est d'avoir un menu (differentes cellules) dans un tableau ou quand je passe avec la souris dessus, la font change d'aspect, la cellule change de couleur et une autre cellule d'un autre tableau html donne une desciption de l'item pointé. Retour à l'état initial sur le onMouseOut.

N'etant pas expert JS, je m'y suis peut etre mal pris...