Discussion :

[progamer54]

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 :

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

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

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

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

onmouseout="alert('majBDD');"

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

A+

[SpaceFrog]

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

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

[E.Bzz]

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
Il me semblait que

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+

[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

[E.Bzz]

Oui, je vois.

Au temps pour moi

, donc ....

A+

[progamer54]

ok merci.
j'ai étais voir.

je fais donc ça :

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

[SpaceFrog]

Tu étais à priori occupé à partir sur la piste d'Ebzz ...
je te conseille de relire le thread ...

[Auteur]

document.all ne fonctionne que sous IE, c'est d'ailleurs une particularité de IE.

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

[SpaceFrog]

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

Code :

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

document.getElementsByTagName('*')

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

C'est malheureusement le seul joker accepté

[E.Bzz]

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+

[Auteur]

en adaptant ce script :

Code x :

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
<!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()).

[progamer54]

SUPER ça marche comme sur des roulettes

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

[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

[Auteur]

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

euh, pas compliqué... 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