evenement mouseout sur un div

Version imprimable

Bonjour, je cherche à appeler une fonction lorsque le pointeur sort d'un élément div. Je me sert donc de l'évènement 'onmouseout' mais le problème est que ce div contient d'autres div et que la fonction est appelé également lorsque la souris passe sur ces div internes. Voila une illustration de mon problème :
Code:

1 2 3 4 5 6 7 8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/dtD/xhtml1-strict.dtd"> <html> <body> <div style="width:50px;height:50px;background-color:#FF0000;padding:25px;" onmouseout="javascript:alert('mouseout')"> <div style="width:50px;height:50px;background-color:#00FF00;"> </div> </div> </body> </html>
ou le lien : http://84.97.22.247/Autres/D%E9velop.../mouseout.html

J'aimerai que cette fonction soit appelée uniquement à la sortie du div rouge et sans passer par la bidouille du calcul de la position du curseur par rapport au div via document.onmousemove. Avez vous une idée?

19/08/2006, 13h24
FremyCompany

C'est possible si tu gère un evenement dans le onmousein de ta div verte qui annulerait l'exécution du onmouseout de la div rouge (dans ce cas, il te faut une variable true/false)

Merci pour ta réponse.

Hier soir j'ai trouvé ce code qui fonctionne, penses que le tien est plus adapté et plus simple ?

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/dtD/xhtml1-strict.dtd">
<html>
 <head>
 <script>
 
 
function eventmouseout(e) {
 
	var el;
 
	if (navigator.userAgent.indexOf("MSIE") != "-1") {
 
		el = window.event.toElement;
 
	} else if (e.relatedTarget != null) {
 
		el = (e.relatedTarget.tagName ? e.relatedTarget : e.relatedTarget.parentNode);
 
	}
 
	if (getContainerWith(el, "DIV", "red") == null) {
 
		alert("mouseout");
 
	}
 
}
 
 
function getContainerWith(node, tagName, className) {
 
	while (node != null) {
 
		if (node.tagName != null && node.tagName == tagName && hasClassName(node, className)) {
 
			return node;
 
		}
 
		node = node.parentNode;
 
	}
 
	return node;
 
}
 
 
function hasClassName(el, name) {
 
	var i, list;
 
	list = el.className.split(" ");
 
	for (i = 0; i < list.length; i++) {
 
		if (list[i] == name) {
 
			return true;
 
		}
 
	}
 
	return false;
 
}
 
 
 </script>
 <head>
 <body>
  <div class="red" style="width:50px;height:50px;background-color:#FF0000;padding:25px;" onmouseout="javascript:eventmouseout(event)">
   <div class="green" style="width:50px;height:50px;background-color:#00FF00;">&nbsp;</div>
  </div>
 </body>
</html>