onmouseover imbriqués et IE6

**picwic** · 27/01/2008, 20h04

Je rencontre un problème de gestion d'évènements onmouseover/onmouseout appliqués à des éléments imbriqués.

Voici le comportement que je souhaite reproduire :

onmouseover d'un DIV, cet élément change de style (changement de la couleur du cadre); onmouseout rétablit le style initial du DIV.
onmouseover d'un SPAN contenu dans le DIV, le SPAN change de style (changement de sa couleur de fond); onmouseout rétablit le style initial du SPAN.
le onmouseover du SPAN ne doit pas déclencher le onmouseout du DIV

Le code qui suit fonctionne correctement sous la plupart des navigateurs (firefox, opera, safari) mais pas sous Ie6 qui déclenche le onmouseout du container quand on survole le contenu (provoque un clignotement fort désagréable qui "pique les yeux").

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="container" onmouseover="this.className='container containerOver'" onmouseout="this.className='container'">
  <table>
    <tr>
      <td>
        <span id="content" onmouseover="this.className='content contentOver'" onmouseout="this.className='content'">bla bla bla..</span>
      </td>
    </tr>
  </table>
</div>

S'agit-il d'un bugg Ie

ou dois-je implémenter une meilleure gestion de mes évènements (propagation etc..) ??

**Auteur** · 27/01/2008, 23h39

bonjour,

S'agit-il d'un bugg Ie ou dois-je implémenter une meilleure gestion de mes évènements (propagation etc..) ??

Ce n'est pas un bug. Et ce phénomène ne concerne pas que IE : tu le retrouves sous FF aussi (cf. les explications ci-dessous). Il faut effectivement stopper la propagation des événements.

Si je ne me trompe pas pour Firefox tu as les méthodes stoppropagation() et pour IE cancelbubble(). Pour les autres navigateurs je ne sais pas.

Ce qu'il se passe :
1- Quand tu entres dans le span tu sors du div (onmouseout sur le div puis onmouseover sur le span) ;
2- Quand tu es dans le span, tu as un onmouseover sur le div car le span est enfant du div (tu as donc ce clignotement) ;
3- Quand tu sors tu span, tu sors du div également (onmouseout sur le span puis onmouseout sur le div) ;
4- Mais à la sortie du span tu es encore dans le div : onmouseover sur le div.

Mais ce phénomène n'existe pas seulement sur IE, tu le retrouves sur Firefox (par exemple). Voici un script qui le met en évidence (passe la souris sur le texte en gras et regarde l'affichage

)

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function out1() {document.getElementById("idDiv").innerHTML += " (div out)";}
 
function over1() {document.getElementById("idDiv").innerHTML += " (div over)";}
 
function out2() {document.getElementById("idDiv").innerHTML += " (span out)";}
 
function over2() {document.getElementById("idDiv").innerHTML += " (span over)";}
 
 
//-->
</script>
 
</head>
 
<body>
<div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;" onmouseover="over1()" onmouseout="out1()">
bla bla bla bla bla bla bla bla bla bla
<span style="font-weight: bold; color: #0000FF" onmouseover="over2()" onmouseout="out2()">
ceci est le contenu du span ceci est le contenu du span
</span>
bla bla bla bla bla bla bla bla bla bla
</div>
 
<div id="idDiv"></div>
 
</body>
 
</html>

**picwic** · 28/01/2008, 00h55

Ok. C'est bien ce que je pensais. Volià ce que l'on obtient :

(div over) (div out) (span over) (div over) (span out) (div out) (div over) (div out)

Maintenant, je ne vois vraiment pas quel doit être l'enchainement d'actions à implémenter (quelle action déclenche ou annihile telle autre etc..). Et plus simplement, comment réaliser le wrokflow suivant?

(div over) (span over) (span out) (div out)

D'ailleurs, est-ce seulement possible?

**SpaceFrog** · 28/01/2008, 09h10

Auteur t'as donné cancelbubble et stoppropagation ...

**picwic** · 28/01/2008, 10h34

Merci SpaceFrog, j'avais bien compris qu'il faut utiliser cancelBubble et stopPropagation..

C'est d'ailleurs ce que j'ai fais au travers de l'exemple de Auteur sans toutefois parvenir au résultat escompté. Je ne vois pas comment y arriver en stoppant uniquement la propagation d'un ou des évènements du SPAN ou du DIV.

Faut-il par exemple stopper le onmouseout du DIV quand on pénètre le DIV (ou le SPAN) et le réactiver quand on sort du SPAN (car il faut bien détecter la sortie du DIV)? Mais dans ce cas, la sortie du DIV ne serait jamais détectée si l'on ne passe pas sur le SPAN..

Si je me/vous perds dans mes explications, n'hésitez pas à me reprendre!!

**le_chomeur** · 28/01/2008, 10h46

Moi je dis on vote !

sinon pour ceux qui en veulent pas voila

:
( je pars sur l'exemple de FF )

(div over) => comportement normal
(span over) => stoppropagation() du div out
(span out) => remise en place du div out et stoppropagation() du div over /!\
(div out) => ta fonction de div out normale

ce qui devrait donner au survol :

survol de la div = affichage
survol du span = out de la div = élément toujours affiché
out du span = over du div = élément toujours affiché
out du div = élément masqué

voila l'algo

**picwic** · 28/01/2008, 23h18

le_chomeur merci mais je n'arrive pas à stopper la propagation au moment du (span over).

Si on reprend l'exemple de Auteur, comment peut-on récupérer l'event lié au (div out) car l'event reçu est celui du (span over) ??

Code :

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

1
2
3
4
5
 
function over2(event) {
  document.getElementById("idDiv").innerHTML += " (span over)";
  event.stopPropagation(); // on stop la propagation lié au (span over)
}

De plus, il me semble que le (div out) soit détecté avant le (span over) ce qui rendrait ta méthode inefficace..

**picwic** · 29/01/2008, 01h41

mouai.. ça se bouscule pas au portillon pour répondre.

en stoppant tous les events, y'a du progrés :

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
 
function out1(ev) {
  document.getElementById("idDiv").innerHTML += " (div out)";
  ev.stopPropagation();
  return false;
}
function over1(ev) {
  document.getElementById("idDiv").innerHTML += " (div over)";
  ev.stopPropagation();
  return false;
}
function out2(ev) {
  document.getElementById("idDiv").innerHTML += " (span out)";
  ev.stopPropagation();
  return false;
}
function over2(ev) {
  document.getElementById("idDiv").innerHTML += " (span over)";
  ev.stopPropagation();
  return false;
}

Voilà ce que l'on obtient :
(div over) (div out) (span over) (span out) (div over) (div out)

Reste à ne plus déclencher le premier (div out) ainsi que le dernier (div over).
Quelqu'un?

**le_chomeur** · 29/01/2008, 11h38

en mettant un timer de 500mseconde ?
qui permettrait de savoir si l'on est sur la span pour déclencher ou non le vrai divout ?

**Auteur** · 29/01/2008, 17h10

voici un exemple avec des timer et des flag. Il faut une temporisation assez longue sur le chrono. Par contre il ne faut pas la faire trop longue sinon les événements se réalisent avec un certain retard.

Pour moi 200ms est une bonne valeur

Code html :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.div1{
  width: 200px; 
  height: 200px;
  border: 1px solid #AAAAAA;
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
var spanOver = false;
var chrono = null;
var tempo = "200";  // 200 ms
 
 
function Timer_MouseOutDiv()
{
    document.getElementById("msg").innerHTML += "divOut ";
    // actions à réaliser lors du MouseOut sur le div
 
    spanOver = false;
    chrono = null;
}
 
 
function MouseOutDiv()
{
    chrono = setTimeout("Timer_MouseOutDiv()", tempo);
}
 
function MouseOverDiv()
{
    if (chrono!=null)
    {
        clearTimeout(chrono);
        chrono = null;
    }
 
    if (!spanOver)
    {
        document.getElementById("msg").innerHTML += "divOver ";
        // actions à réaliser lors du MouseOver sur le div
    }
}
 
function MouseOverSpan()
{
    spanOver = true;
    if (chrono!=null)
    {
        clearTimeout(chrono);
        chrono = null;
    }
 
    document.getElementById("msg").innerHTML += "spanOver ";
    // actions à réaliser lors du MouseOver sur le span
}
 
//------------
function Timer_MouseOutSpan()
{
    document.getElementById("msg").innerHTML += "spanOut ";
    // actions à réaliser lors du MouseOut sur le span
 
    spanOver = false;
    chrono = null;
}
 
function MouseOutSpan()
{
    if (chrono!=null)
    {
        clearTimeout(chrono);
        chrono = null;
    }
 
    chrono = setTimeout("Timer_MouseOutSpan()", tempo);
}
 
//-->
</script>
 
</head>
 
<body>
 
<div class="div1 divOut" id="idDiv1" onmouseover="MouseOverDiv()" onmouseout="MouseOutDiv()">
bla bla bla bla bla bla bla bla bla bla bla bla
 
<span style="color: #0000FF; font-weight: bold" onmouseover="MouseOverSpan()" onmouseout="MouseOutSpan()">
contenu du span contenu du span contenu du span contenu du span
</span>
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>
 
<p id="msg"></p>
 
</body>
 
</html>

**picwic** · 29/01/2008, 19h01

Auteur, le coup des timers/flags, j'ai déjà essuyé quelques plâtres avec et je suis pas super chaud pour les utiliser dans ce contexte.

Je préfèrerais une solution 'w3c compliant'.. Ceci dit, je vais quand même tester de l'intégrer des fois que..

Merci pour votre implication. Il est vraiment important pour moi de résoudre ce problème.

**picwic** · 30/01/2008, 23h23

Bon en fait ça va pas le faire du tout ta solution Auteur.
Le système peut comporter pas mal de conteneurs dont les éléments contenus ne sont pas uniques et parfois même nombreux.
Et puis j'ai peur que l'affichage se dégrade sur les autres plateformes qui elles rendent nickel à la base...

Il me faut du robuste !!!

**Auteur** · 31/01/2008, 11h47

Envoyé par picwic

Bon en fait ça va pas le faire du tout ta solution Auteur.
Le système peut comporter pas mal de conteneurs dont les éléments contenus ne sont pas uniques et parfois même nombreux.
Et puis j'ai peur que l'affichage se dégrade sur les autres plateformes qui elles rendent nickel à la base...

Au lieu d'utiliser des span, tu peux utiliser la balise a et sa pseudo classe hover ?

Code html :

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
 
<html>
<head>
<title></title>
 
<style type="text/css">
<!--
.div1{
  width: 200px; 
  height: 200px;
  border: 1px solid #AAAAAA;
}
 
a{
 text-decoration: none;
 cursor: default; 
}
 
a:hover{
 background-color: #AAAAAA;
 cursor: default;
}
//-->
</style>
 
 
<script type="text/javascript">
<!--
function MouseOverDiv()
{
 //.......
}
 
 
function MouseOutDiv()
{
 //.......
}
 
//-->
</script>
 
</head>
 
<body>
 
<div class="div1 divOut" id="idDiv1" onmouseover="MouseOverDiv()" onmouseout="MouseOutDiv()">
bla bla bla bla bla bla bla bla bla bla bla bla
 
<a style="color: #0000FF; font-weight: bold" href="#" onclick="return false">
contenu du span contenu du span contenu du span contenu du span
</a>
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>

**picwic** · 31/01/2008, 13h07

Envoyé par Auteur

Au lieu d'utiliser des span, tu peux utiliser la balise a et sa pseudo classe hover ?

Non. Le système que je développe est 'Full Ajax'. Si je remplace les balises span par des balises a, je vais devoir leur coller des this.blur() au onclick, ce que je voudrais éviter.

**picwic** · 04/02/2008, 11h18

Je ne peux pas croire que personne ne sait comment utiliser cancelBublle/stopPropagation pour régler mon souci de mosueover/mouseout imbriqués!!!!

Pffff....

**le_chomeur** · 04/02/2008, 11h31

Je ne peux pas croire que personne ne sait comment utiliser cancelBublle/stopPropagation pour régler mon souci de mosueover/mouseout imbriqués!!!!

Pffff....

n'oublis jamais que les gens sont ici pour aider , dans la mesure du possible ou leur occupation personnel / professionel leur permet !
donc prend ton mal en patience en attendant que quelqu'un puissse se pencher plus en avant sur ton problème

Merci...

pour le je regarde en début d'après midi ...

**picwic** · 04/02/2008, 13h03

Bah ! On est tous logé à la même enseigne je crois!!
J'étais juste désespéré voilà tout... mdr

Plus sérieusement, je vais "googler" davantage pour comprendre la propagation des évenements. Ca peut pas faire de mal!

**le_chomeur** · 04/02/2008, 13h12

Bah ! On est tous logé à la même enseigne je crois!!

Si si je t'assure

Bon j'ai réussis, c'est tout bète ...
tu as le bon code avec les stopPropagation() il te manque juste une condition

je te laisse chercher c'est très simple ...

**picwic** · 04/02/2008, 16h20

J'ai finalement trouvé une solution sur le site quirksmode.org : http://www.quirksmode.org/js/events_mouse.html
(voir le paragraphe "Mousing out of a layer")

Voilà ce que ça donne avec l'exemple :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<html>
  <head>
    <style type="text/css">
      .div1{
        width: 200px; 
        height: 200px;
        border: 1px solid #AAAAAA;
      }
      .overDiv {background-color : red;}
      .outDiv {background-color: white;}
      .overSpan {background-color: orange;}
      .outSpan {background-color: white;}
    </style>
 
 
    <script type="text/javascript">
 
      function out1(e) {
          // compatibilité
          if (!e) var e = window.event;
 
          // élément duquel on arrive 
          var tg = (window.event) ? e.srcElement : e.target;
          if (tg.id != 'div') {
              return;
          }
 
          // élément vers lequel on va
          var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
          while (reltg != tg && reltg.nodeName != 'BODY') {
              reltg = reltg.parentNode
          }
 
          // ?
          if (reltg == tg) {
              return;
          }
 
          // action
          this.className = "outDiv";
          document.getElementById("msg").innerHTML += " (div out)";
      }
 
      function over1() {
          // action
          this.className = "overDiv";
        document.getElementById("msg").innerHTML += " (div over)";
 
        return;
      }
 
      function out2() {
          // action
          this.className = "outSpan";
        document.getElementById("msg").innerHTML += " (span out)";
 
        return;
      }
 
      function over2() {
          // action
          this.className = "overSpan";
        document.getElementById("msg").innerHTML += " (span over)";
 
        return;
      }
    </script>
  </head>
 
  <body>
 
    <div id="div" class="outDiv" style="width: 200px;height:200px;border:1px solid #AAAAAA;">
      bla bla bla bla bla bla bla bla bla bla bla bla
      <span id="span" class="outSpan" style="color: #0000FF; font-weight: bold">
          contenu du span contenu du span contenu du span contenu du span
      </span>
      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>
 
    <p id="msg"></p>
 
    <script type="text/javascript">
      var div=document.getElementById("div");
      div.addEventListener("mouseover", over1, false);
      div.addEventListener("mouseout", out1, false);
 
      var span=document.getElementById("span");
      span.addEventListener("mouseover", over2, false);
      span.addEventListener("mouseout", out2, false);
    </script>
 
  </body>
</html>

le_chomeur, c'est quoi ta solution "toute bête" à toi ?

**picwic** · 05/02/2008, 13h05

La solution que j'ai posté fonctionne mais elle reste appropriée pour un DIV contenant des SPAN. Et tout se complique de mon côté car ces DIV sont composés de SPAN ou de DIV encapsulés par des TABLE..

le_chomeur, concernant ta solution, je donne ma langue au chat...

onmouseover imbriqués et IE6

JavaScript

Discussions similaires

Partager

Partager