Discussion :

[yanice]

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 :

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

monobjetdiv.onmouseout = startTimer;

et mes fonctions timer :

Code :

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

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

[E.Bzz]

Bonjour,

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 ?

[yanice]

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?

[SpaceFrog]

Code :

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

monobjetdiv.onmouseout =function(){ startTimer};

[yanice]

monobjetdiv.onmouseout =function(){ startTimer};

fonctionne pas
rien ne se passe

[marcha]

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 :

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

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 :

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

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

[marcha]

Code :

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

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 :

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

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 :

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

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);
}

[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?

[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