OnMouseOut dans div avec boutons

Version imprimable

19/11/2008, 12h03
progamer54

OnMouseOut dans div avec boutons
Bonjour

j'ai un léger probleme. J'aimerai qu'une méthode (qui fait un maj dans sur BDD )soit lancée quand la souris de l'utilisateur quitte une zone (div).

Le probleme est que cette zone div contient divers élément :
une table, des boutons radio...

j'ai fais un test comme suit:
Code:

1 2 <div class="divForm" onmouseout="javascript:alert('majBDD');">
Le problème est que je me retrouve avec la popup a chaque fois que je sort d'un élément présent dans la div et pas SEULEMENT en sortant de la div. Ce qui est très génant car ça n'est pas du tout l'effet recherché.

Auriez vous une idée sur la façon de résoudre le problème car n'étant pas expert js, je suis un peu perdu ?

merci d'avance :P
19/11/2008, 12h08
E.Bzz

Bonjour,
fait une recherche sur cancelBubble et stoppropagation sur ce forum : la question a souvent été posée ...

Sinon : pas de "javascript:" dans le code des évènements

Code:

onmouseout="alert('majBDD');"

On ne le précise que quand on mets du JS dans le href d'un <A> ;)

A+
19/11/2008, 13h17
SpaceFrog

heu à mon avis c'est l'inverse EBzz ...

Sujet d'ailleurs aussi traite , le coup du setTimeout clearTimeout ...
19/11/2008, 14h01
E.Bzz

Citation:

Envoyé par SpaceFrog

heu à mon avis c'est l'inverse EBzz ...

Sujet d'ailleurs aussi traite , le coup du setTimeout clearTimeout ...

Au temps pour moi, si c'est le cas :mrgreen:
Il me semblait que

Citation:

a chaque fois que je sort d'un élément présent dans la div et pas SEULEMENT en sortant de la div

correspondait en fait au passage de la div elle-même vers un élément qu'elle contient (ce qui déclenche un mouseout sur la div, généralement non souhaité) :?

A+
19/11/2008, 14h22
SpaceFrog

oui certes mais faire un cancelBubble sur l'objet contenu ne changera pas le problème ...

il faut odentifier la sortie comme etant une sortie définitif vers l'exterieur du div ou une fausse sortir vers un elelmnt child du div.
Ceci peut se faire en modifiant sur le mousover des enfants une variable flag puis en venant ou non arreter un setTimeout qui declenche la focntion de onmouseout du div
19/11/2008, 14h29
E.Bzz

Oui, je vois.

Citation:

Envoyé par E.Bzz

Au temps pour moi

, donc .... :D

A+

ok merci.
j'ai étais voir.

je fais donc ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type='text/javascript'> var Alltags = document.body.all; for (i=0;i<Alltags.length;i++){ alert('alltag'); Alltags[i].setAttribute('onmouseout', function(){stopEvent();}); } function stopEvent(e) { alert('stopEvent'); if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); } </script>
ça marche sous IE mais pas sous FF.
->sous FF je n'ai jamais la popup 'alltag'. Apparement le document.body.all ne fonctionne pas.

Y aurait il une autre syntaxe pour FF?

19/11/2008, 14h34
SpaceFrog

Tu étais à priori occupé à partir sur la piste d'Ebzz ...
je te conseille de relire le thread ...
19/11/2008, 14h39
Auteur

document.all ne fonctionne que sous IE, c'est d'ailleurs une particularité de IE.
19/11/2008, 14h53
progamer54

OK.

Donc, SpaceFrog tu conseille de modifier les mouseOver de tous les éléments présents dans mon div ?
Ca risque de faire le souk, si je ne peux pas faire de document.all et que je dois définir le onMouseOut pour chaque élément.

sinon je me demandais, y'a pas moyen de connaitre l'id de l'élément qui a provoqué l'événement?
De cette manière je pourrais tester dans le onMouseOut de mon div si c'est bien le lui qui a provoqué l'événement et non pas un sous élément...
19/11/2008, 14h54
SpaceFrog

ce n'est pas la cause du problème mais pour info il me semble que

Code:

document.getElementsByTagName('*')

peut l'emuler de façon crossbrowser...

C'est malheureusement le seul joker accepté :(
19/11/2008, 15h00
E.Bzz

Citation:

Envoyé par progamer54

sinon je me demandais, y'a pas moyen de connaitre l'id de l'élément qui a provoqué l'événement?

Visiblement oui (cf. le 1° exemple de BigBoom) ...

A+

en adaptant ce script :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title></title>

<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
<!--  
var chrono = null;
function initEvent(idConteneur)
{
  var elements = document.getElementById(idConteneur).getElementsByTagName("*");
  var i;
  var n = elements.length;
  
  for (i=0; i<n; i++)
  {
    elements[i].onmouseover = function(){stopTempo()}
  }
  
}

function stopTempo()
{
  if (chrono!=null)
    clearTimeout(chrono);
  chrono = null;
}

function demarreTempo()
{
  if (chrono==null)
    chrono = setTimeout("mouseOut()","20");
}

function mouseOut()
{
  document.getElementById("sortie").innerHTML += "Vous êtes sortis du div <br>";
  chrono = null;
}
//-->
</script>
 
</head>
 
<body onload="initEvent('conteneur')">

<div id="conteneur" onmouseout="demarreTempo()" onmouseover="stopTempo()" style="border: solid 1px #0000FF; padinng:40px; width:300px; margin:40px;">

  <input type="text" value="texte" style="margin:5px"/><br />
  <input type="text" value="texte" style="margin:5px"/><br />
  <input type="text" value="texte" style="margin:5px"/><br />

  <input type="button" value="un bouton" onclick="alert(this.value)" style="margin:5px"/><br />
  <input type="button" value="un autre bouton" onclick="alert(this.value)" style="margin:5px"/><br />

  <div style="margin:5px; border: solid 1px #FF0000; font-size: 14pt"> 
  voici du texte contenu dans un div <a href="">un lien</a> 
  <span style="font-weight:bold">texte contenu dans un span</span>
  </div>

</div>

<div id="sortie"></div>

</body>

</html>

seul inconvénient : si les éléments contenus dans le div parent gèrent l'événement onmouseover, la fonction définie par défaut sera remplacée par stopTempo() (cf. la fonction initEvent()).

19/11/2008, 15h56
progamer54

SUPER ça marche comme sur des roulettes :king:

Donc si j'ai bien pigé :
quand on rentre dans un élément qui se trouve dans la zone (div), le javascript considère qu'on est sorti de la zone.

Donc ta solution c'est :
quand l'événement 'sortiDeLaZone' est lancé, on attend 20ms avant de lancer la méthode voulue en sortie de zone.
Or, chaque élément de la zone interromp le compte a rebour quand la souris 'entre dedans'.
pour résumer : on se laisse un intervalle de 20ms pour qu'un élément interne a la zone signale qu'il a la souris.

Bravo!
pas facile de réussir un truc qui parait pourtant pas compliqué du tout a la base.

MERCI ENCORE
19/11/2008, 16h05
SpaceFrog

exactement tu as bien saisi le principe

l'evènement onmouse se declenche de façon décalée (20ms) sauf si il est arreté par le onmouseover d'un autre element
19/11/2008, 16h37
Auteur

Citation:

pas facile de réussir un truc qui parait pourtant pas compliqué du tout a la base.

euh, pas compliqué... :aie: Quand tu as compris le truc ça va. Mais, crois moi, gérer des événements antagonistes (onmouseover et onmouseout) ce n'est pas évident :?