evenement intégré dans la fonction

Version imprimable

31/05/2007, 16h24
yanice

evenement intégré dans la fonction
bonjour,
j'ai une fonction javascript qui m'affiche une div avec display = block
je voudrai ajouter un timer qui se lance lorsque ma souris quitte la div
j'ai donc créer une fonction startTimer() et son stopTimer() avec le display = none

mon souci est qu'avec ce code le timer se lance quand je survole la div

Code:

monobjetdiv.onmouseout = startTimer;

et mes fonctions timer :
Code:

1 2 3 4 5 6 7 8 function startTimer(){ clearTimeout(timer); var timer = setTimeout("stopTimer()",2500); } function stopTimer(){ document.getElementById('madiv').style.display='none'; }
merci pour votre aide
31/05/2007, 16h35
E.Bzz

Bonjour,

Citation:

Envoyé par yanice

mon souci est qu'avec ce code le timer se lance quand je survole la div

Et tu voudrais quoi, exactement ?
Que ça démarre dans quel cas (et dans quel cas non), et que ça stop quand ?
31/05/2007, 16h40
yanice

Citation:

je voudrai ajouter un timer qui se lance lorsque ma souris quitte la div

et uniquement dans ce cas là,
si la souris repasse sur la div le timer devrait etre annulé
c'est plus clair?
31/05/2007, 16h43
SpaceFrog

Code:

monobjetdiv.onmouseout =function(){ startTimer};
31/05/2007, 16h51
yanice

Citation:

monobjetdiv.onmouseout =function(){ startTimer};

fonctionne pas:(
rien ne se passe

Salut,

Le problème avec les évènements capturés par un parent
c'est qu'ils sont appelés aussi lorsque leurs enfants les reçoivent.

Je m'explique: si tu as ceci:
Code:

1 2 3 4 5 <div id='parent'> <div id='enfant'> </div> </div>
Si la souris quitte le div enfant et que tu intercepte le onmouseover
au niveau du parent, alors le onmouseover du parent est appelé quand
bien même la souris n'a pas quitté le parent.

Il te faut déterminer l'élément qui a provoqué l'évènement. Tu peux le faire
avec l'objet event. (Attention c'est pas très "crossbrowser") c'est pourquoi le
code ci-dessous est un peu compliqué:
Code:

1 2 3 4 5 6 7 8 window.onload = function() { document.getElementById('parent').onmouseout = function(event) { var event = event || window.event; var src = event.target || event.srcElement; // l'élément qui a provoqué le onmouseout console.log(src); // si tu as pas FireBug, installe le :-) } }
Tu peux donc tester si c'est bien le div parent qui a reçu l'évènement
en comparant src.id avec l'id de ton div

Mais attention... c'est pas fini :-) si l'enfant qui provoque l'évènement
est collé au bord de son parent, tu n'es pas sur de détecter le onmouseover
du parent. Je te laisse tester

Citation:

Envoyé par yanice

Code:

1
2
3
4
5
6
7
8
function startTimer(){
	clearTimeout(timer);
	var timer = setTimeout("stopTimer()",2500);
}
 
function stopTimer(){
	document.getElementById('madiv').style.display='none';
}

Il te faut mémoriser le timer dans une variable gloable pour pouvoir le stoper

Code:

1
2
3
4
5
6
7
8
9
10
 
var timer = false;
function startTimer(){
	if(timer) clearTimeout(timer);
	timer = setTimeout("stopTimer()",2500);
}
 
function stopTimer(){
	document.getElementById('madiv').style.display='none';
}

ou un peu plus simple:

Code:

1
2
3
4
5
6
7
8
 
var timer = false;
function startTimer(){
	if(timer) clearTimeout(timer);
	timer = setTimeout( function() {
            document.getElementById('madiv').style.display='none';
        }, 2500);
}

31/05/2007, 17h15
yanice

est ce que tu peux m'expliquer un peu plus comment fonctionne l'objet event, c'est pas la première fois qu'il me pose problème et je ne comprend pas vraiment comment il fonctionne, il correspond à quoi exactement?
31/05/2007, 17h20
marcha

C'est un objet qui contient les informations utiles lors du déclenchement
d'un évènement. Les informations contenues dépendent du type d'évenement,
par exemple pour onmousemove, l'objet event contiendra les coordonnées de
la souris. Pour onkeypress le code de la touche pressée.

Cherche
Javascript "Objet Event"
sur google tu trouveras plein d'info