evenement mouseout sur un div

**seb54** · 18/08/2006, 20h43

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 :

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

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;">&nbsp;</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?

**FremyCompany** · 19/08/2006, 13h24

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)

**seb54** · 19/08/2006, 15h22

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 :

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
<!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>

evenement mouseout sur un div

JavaScript

Discussions similaires

Partager

Partager