simuler onmouseleave sous FF

**ThomasH** · 25/09/2006, 21h01

Bonjour

Je m'arrache les cheveux. J'ai un DIV avec une propriété déclenché par onmouseOUT.

ce DIV contient du texte et une image. Le problème c'est que dès que la souris passe sur l'image, le onmouseOUT se déclenche. Or je voudrais qu'il ne se déclenche qu'en sortant du DIV.

L'événement onmouseleave (sous IE) fonctionne parfaitement pour faire ça, mais ça n'est pas supporté par FF.

Il parait que la clé se cache dans le bubbling. J'ai beau tourné le truc dans tous les sens, impossible de faire ce que je veux faire... (cross-browser)

Des idées ?

**ThomasH** · 25/09/2006, 23h07

Il semblerait que le problème vienne des layers, et une solution serait

http://www.quirksmode.org/js/events_...tml#mouseenter

(section mousing out of a layer)

Mais en pratique je n'arrive pas à insérer ce petit bout de code. Où ? Dans la fonction appelée par le onmouseout ? Avant ?

**Auteur** · 26/09/2006, 00h45

bonjour,

voici un petit script qui peut faire l'affaire :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
div{
 width: 200px;
 border: 1px solid #000000;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var outImg = false;
var timer = null;
 
function mouseOverDiv()
{
  clearTimeout(timer);
}
 
function mouseOutDiv()
{
 if (outImg)
 {
  outImg = false;
  alert("coucou");
 }
}
 
function timerOutDiv()
{
 timer = setTimeout("mouseOutDiv()","200");
}
 
function mouseOutImg()
{
  outImg = true;
}
 
//-->
</script>
 
</head>
 
<body>
<div onmouseout="timerOutDiv()" onmouseover="mouseOverDiv()">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 
<img onmouseout="mouseOutImg()" src="image.jpg">
 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
</body>
</html>

Explications :
Détails des événements :
img - onmouseout / div - onmouseout / div - onmouseover
>Lors d'un mouseout sur l'image les événements mouseout et mouseover se produisent sur le div (toujours dans cet ordre).
Le but est donc d'attendre le mouseover sur le div. S'il se produit on interdit
l'exécution de la fonction appelée lors du mouseout sur le div.

Donc :
mouseout (précédé d'un mouseover) sur l'image > outImg = true (nous sommes passés sur l'image)
mouseout sur le div > déclenchement d'une temporisation ( 200ms ici )
mouseover sur le div > arrêt de la temporisation, la fonction mouseOutDiv() n'est pas appelée et outImg est toujours à true.
mouseout sur le div (sortie du div) > déclenchement de la temporisation
pas de mouseover sur le div dans le temps imparti > la fonction mouseOutDiv() est appelée et outImg = false

**ThomasH** · 26/09/2006, 16h05

Merci pour cette réponse !

Je vais essayer ça et je te tiens au courant.

simuler onmouseleave sous FF

JavaScript

Discussions similaires

Partager

Partager