OnMouseOver sur div répété plusieurs fois

**Khleo** · 26/10/2009, 20h54

Bonjour,

J'ai :

Code :

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

1
2
3
<div onmouseover = "fonction();">
...
</div>

A l'intérieur de cette div il y a un tableau et du texte.

A chaque fois que je déplace mon curseur à l'intérieur de la div, d'un texte à l'autre, la fonction() est exécutée alors que je n'ai pas quitté la div.

Comment faire pour qu'il soit exécuté une seule fois à l'intérieur de la div ?

Merci

**Auteur** · 27/10/2009, 00h11

bonjour,

tu peux adapter ce code :
http://www.developpez.net/forums/d57...circuiter-1-a/

**le_chomeur** · 27/10/2009, 09h55

J'ai même trouvé mieux depuis ...

il faut annihiler les évènements enfants : un bon cancelbuble dans les enfants résoud le problème

**Auteur** · 28/10/2009, 12h35

Envoyé par le_chomeur

J'ai même trouvé mieux depuis ...

il faut annihiler les évènements enfants : un bon cancelbuble dans les enfants résoud le problème

Je n'ai jamais su m'en servir

En plus il y a également stopPropagation().

**le_chomeur** · 29/10/2009, 00h41

ouep j'ai enfin compris le fonctionnement ...

galère !!

en gros ie fait ===> tac puis <=== tac

FF fait tac ==> tac !

pas beaucoup plus parlant hein ;-)

je vais ouvrir un sujet / topic pour un retour d'expérience ...

sinon regarde la source de mon dernier calendrier et particulièrement les rollovers sur les li

**Bovino** · 29/10/2009, 09h03

En gros, un événement engendre deux actions successives

Le bouillonnement : l'événement monte de l'élément le plus précis vers la racine de l'arbre DOM.
La capture : l'événement se propage de la racine vers l'élément le plus ciblé.

et comme le fait remarquer le_chomeur, dans le modèle du DOM, un événement doit être capturé puis bouillonner, mais IE fait le contraire

**Auteur** · 29/10/2009, 10h23

Envoyé par le_chomeur

en gros ie fait ===> tac puis <=== tac

FF fait tac ==> tac !

pas beaucoup plus parlant hein ;-)

en effet

Envoyé par Bovino

et comme le fait remarquer le_chomeur, dans le modèle du DOM, un événement doit être capturé puis bouillonner, mais IE fait le contraire

une vraie cuisine

F2 · 29/10/2009, 19h25

sinon regarde la source de mon dernier calendrier et particulièrement les rollovers sur les li

où peut-on consulter ce code ?
merci

**Auteur** · 29/10/2009, 20h49

Envoyé par F2

où peut-on consulter ce code ?
merci

ici :
http://www.developpez.net/forums/d82...drier-v3-beta/

**le_chomeur** · 30/10/2009, 10h07

Petit exemple pour illustrer la différence sous ie et firefox :
j'ai annihiler le mouseover a l'intérieur de la div parent sous ie ..
( pour avoir le même comportement sous ie et FF enlever les commentaires sur le bubule

)

ça serait sympa de créer un fil de discution , BOVINO qu'en penses tu ?

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
	</head>
	<body onload="go()">
		<div style="width:200px;height:200px;padding:50px;background-color:#9f3d3e;position" id="parent">
			<div style="width:100px;height:100px;padding:50px;background-color:green" id="enfant">
				<div style="width:100px;height:100px;background-color:blue" id="petitenfant">
				</div>
			</div>
			</div>
		</div>
 
				<div id="lesLog">
 
		</div>
 
 
<script type="text/javascript">		
var addEvent = function(func,onEvent,elementDom) { 
	if (window.addEventListener) { 
		elementDom.addEventListener(onEvent, func, true); 
	} else if (document.addEventListener) { 
		elementDom.addEventListener(onEvent, func, true); 
	} else if (window.attachEvent) { 
		elementDom.attachEvent("on"+onEvent, func); 
	} 
};
 
var detachEvent = function(onEvent,elementDom){
 
	elementDom.onclick = null;
}
 
 
var logMe = function(quiDeclenche, quiEvenement, Evenement, couleur){
	var lesLog = document.getElementById("lesLog");
	lesLog.innerHTML += "Element déclencheur : " + quiDeclenche.id + "<br />";
	lesLog.innerHTML += "Elément ciblé : " + quiEvenement.id + "<br />";
	lesLog.innerHTML += "Quel évènement : " + Evenement.type + "<br />";
	lesLog.innerHTML += "<hr />";
	quiEvenement.style.backgroundColor = couleur;
}		
		//Récupération des 3 divs
		var lePapa = document.getElementById("parent");
		var enfant = document.getElementById("enfant");
		var petitEnfant = document.getElementById("petitenfant");
 
 
		function go(){
 
			addEvent(function(moi){
			return function(e){
 
				if (!e) var e = window.event;
				if (e.target) targ = e.target;
				else if (e.srcElement) targ = e.srcElement;
				if (targ.nodeType == 3) // Safari bug
				targ = targ.parentNode;
				logMe(moi,targ,e);
				moi.style.backgroundColor = "yellow";
				/*
				try {
					if (!window.event.cancelBubble) {
						window.event.cancelBubble = true;
					}
					else{
						e.stopPropagation();
					}
				}
				catch(err){
					//alert(err.message);
				}*/
			}
			}(enfant),"mouseout",enfant);
 
			addEvent(function(moi){
			return function(e){
 
				if (!e) var e = window.event;
				if (e.target) targ = e.target;
				else if (e.srcElement) targ = e.srcElement;
				if (targ.nodeType == 3) // Safari bug
				targ = targ.parentNode;
				logMe(moi,targ,e);
				moi.style.backgroundColor = "green";
 
				try {
					if (!window.event.cancelBubble) {
						window.event.cancelBubble = true;
					}
					else{
						e.stopPropagation();
					}
				}
				catch(err){
					//alert(err.message);
				}
			}
			}(enfant),"mouseover",enfant);
 
 
 
			addEvent(function(moi){
			return function(e){
 
				if (!e) var e = window.event;
				if (e.target) targ = e.target;
				else if (e.srcElement) targ = e.srcElement;
				if (targ.nodeType == 3) // Safari bug
				targ = targ.parentNode;
				logMe(moi,targ,e);
				moi.style.backgroundColor = "green";
				/*
				try {
					if (!window.event.cancelBubble) {
						window.event.cancelBubble = true;
					}
					else{
						e.stopPropagation();
					}
				}
				catch(err){
					//alert(err.message);
				}*/
			}
			}(lePapa),"mouseover",lePapa);
 
 
			addEvent(function(moi){
			return function(e){
 
				if (!e) var e = window.event;
				if (e.target) targ = e.target;
				else if (e.srcElement) targ = e.srcElement;
				if (targ.nodeType == 3) // Safari bug
				targ = targ.parentNode;
				//logMe(moi,targ,e);*
				moi.style.backgroundColor = "yellow";
				/*
				try {
					if (!window.event.cancelBubble) {
						window.event.cancelBubble = true;
					}
					else{
						e.stopPropagation();
					}
				}
				catch(err){
					//alert(err.message);
				}*/
			}
			}(lePapa),"mouseout",lePapa);
		}
</script>		
	</body>
</html>

OnMouseOver sur div répété plusieurs fois

JavaScript

Discussions similaires

Partager

Partager