11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]éviter onMouseOver sur TOUTES cells d'1 Table

Bonjour bonjour !

Je voudrais connaître l'objet-fils se trouvant sous la souris dont j'ai détecté l'objet-parent avec onMouseOver.

J'ai une TABLE avec une trentaine de cellules.
Il ne me semble pas pertinent de placer des onMouse (Over, Click, Out) dans CHACUNE de ces cellules (que ce soit en dur ou en programmé).

Je voudrais donc détecter simplement si la souris se trouve sur la TABLE,
... et à ce moment-là, analyser le flux des événements pour détecter quelle cellule aurait pu avoir déclenché un onMouseOver si j'y avais placé ce détecteur (sans aller chercher les coordonnées de souris et de cellules, tout de même !).

Dit autrement :
Connaissant le onMouseOver d'une TABLE, puis-je savoir quelle CELLULE subit également un onMouseOver au même instant ?

- Question subsidiaire : event.target s'applique t-il à l'objet testé ou à l'objet le plus bas dans la hiérarchie ?

(n'hésitez pas à me dire si mon raisonnement peut sembler inadéquat Smiley cligne )
Modifié par Gill (01 Oct 2007 - 19:32)
Oui oui : j'avais déjà visité ce tutoriel, mais beaucoup mal à le comprendre Smiley sweatdrop (les gestions d'événements, c'est pas simple !)...

J'ai quand même résolu mon problème Smiley biggrin

Effectivement, event.target s'applique bien à l'objet le plus bas dans la hiérarchie, ce qui m'a facilité la tâche :
Il m'a donc suffit de chercher un événement sur la TABLE pour retrouver la CELLULE "ciblée" (avec event.target, donc).
... ce qui me permet enfin de ne pas placer un onMouseOver() sur chaque cellule ! RESOLU ! Smiley biggrin 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>onMouseOver de Table pour détecter event de CHAQUE cellule</title>
  <style> td{border-style: solid; cursor: pointer;}</style>
  <script>
function overTable(event){
	var target = event.target || event.srcElement; //objet final ayant subi l'événement (Gecko ou MSIE)
	if (target.tagName=="TD" && document.getElementById) {
		var cellule = document.getElementById(target.id);
		var tableau = cellule.parentNode.parentNode.parentNode; // td/tr/tbody/table
	 	alert("Table : " + tableau.id + " - Cellule : " + cellule.id + "\n" + "(onMouseOver uniquement sur la Table)")
	}
}
  </script>
  </head>
<body>
	<h3>Un seul onMouseOver() pour détecter les survols Souris de CHAQUE cellules d'une TABLE.</h3>
	<p>(Passer la souris sur le tableau)</p>
	<table id="T1" onMouseOver="overTable(event)">
	 <tr>
	  <td id="C1">Cellule C1</td>
	  <td id="C2">Cellule C2</td>
	  <td id="C3">Cellule C3</td>
	 </tr>
	</table>
</body>
</html>

Edit : et en vérifiant bien que target.tagName="TD", on n'a plus les problèmes de bordures de Tables Smiley confused !
Modifié par Gill (01 Oct 2007 - 15:51)
Sujet clos
Aller à