Les événements en pagaille

Question

Liam74

5 Sep 2011 à 14:10

Bonjour à tous !

J'ai découvert un comportement que je n'arrive pas à expliquer..

Prenons un tableau dans lequel toutes les cases ont un événement onMousseOver :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">

	TD
	{
		border: solid black 1px;
		height: 200px;
	}
	
	table
	{
		width: 100%;
	}

</style>

</head>
<body>


<script type="text/javascript">

function fonction1(idCase)
{
	console.info("Debut - case : "+idCase)	;

	for (i = 0; i < 9000000; i++ )
	{
		toto = "toto";
	}
	console.info("Fin - case : "+idCase)	;
}


</script>


<Table>
<TR>
<TD id="000001-1 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-2 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-3 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-4 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-5 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-6 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-7 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-8 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-9 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-10" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-11" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-12" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-13" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-14" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-15" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-16" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-17" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-18" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-19" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-20" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-21" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-22" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-23" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-24" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-25" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-26" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-27" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-28" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-29" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-30" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-31" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-32" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-33" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-34" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-35" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-36" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-37" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-38" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-39" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-40" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-41" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-42" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-43" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-44" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-45" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-46" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-47" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-48" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000001-49" onMouseOver="fonction1(this.id)">&nbsp;</TD>
</TR>


<TR>
<TD id="000002-1 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-2 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-3 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-4 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-5 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-6 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-7 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-8 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-9 " onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-10" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-11" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-12" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-13" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-14" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-15" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-16" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-17" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-18" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-19" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-20" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-21" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-22" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-23" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-24" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-25" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-26" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-27" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-28" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-29" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-30" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-31" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-32" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-33" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-34" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-35" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-36" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-37" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-38" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-39" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-40" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-41" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-42" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-43" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-44" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-45" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-46" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-47" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-48" onMouseOver="fonction1(this.id)">&nbsp;</TD>
<TD id="000002-49" onMouseOver="fonction1(this.id)">&nbsp;</TD>
</TR>
</body>
</html>

Si on se déplace rapidement sur le tableau, on remarque dans les messages créés dans la console, que certain onMouseOver ne sont pas déclenché :

Debut - case : 000002-2
Fin - case : 000002-2

Debut - case : 000001-3
Fin - case : 000001-3

Debut - case : 000001-4
Fin - case : 000001-4

Debut - case : 000001-10
Fin - case : 000001-10

Debut - case : 000001-21
Fin - case : 000001-21

Debut - case : 000001-28
Fin - case : 000001-28

Debut - case : 000001-33
Fin - case : 000001-33

Debut - case : 000001-36
Fin - case : 000001-36

Debut - case : 000001-37
Fin - case : 000001-37

Debut - case : 000001-39
Fin - case : 000001-39

Question : Pourquoi ?
J'ai l'impression qu'on ne peux pas déclencher simultanément plusieurs événements de même type ( onMouseOver dans mon exemple). Il faut obligatoirement que le précédent ait fini de s'exécuter avant que le suivant puisse commencer.

Est il possible de changer ce comportement ? Si oui comment ?
Merci d'avance
Modifié par Liam74 (05 Sep 2011 - 14:16)

ryuran

6 Sep 2011 à 09:27

A priori un pointeur ne peux pas physiquement être simultanément sur 2 cases. Donc c'est impossible de déclenché ces événements en même temps. Ci cela ce fait quand même, le bug est là.

Lpu8er

6 Sep 2011 à 09:39

De mémoire, onMouseOver ne se déclenche que sur un hover. De mémoire, il faut un temps léger de déclenchement. De mémoire, le déplacement d'une souris rapide et le temps que cette dite souris reste sur un élément est assez aléatoire, quand on tape dans l'ordre de la milli voire nano seconde.

En passant, tu peux réduire ton code en utilisant du binding d'événements (ou javascript discret, de mémoire). Encore plus fort en passant par un framework JS.

Sujet clos