onmouseover imbriqués et IE6

**picwic** · 06/02/2008, 12h48

le_chomeur, je viens de tester la solution que tu m'as envoyé. Elle fonctionne avec l'exemple simple. On avance! Maintenant, si tu aimes relever les défis (hé hé!!!

), je te joins le casse tête ultime :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
<html>
  <head>
    <style type="text/css">
      .overDiv {background-color : red;}
      .outDiv {background-color: white;}
      .overSpan {background-color: orange;}
      .outSpan {background-color: white;}
      table, tr, td {border: 2px solid #111CCC;}
    </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 != 'conteneur') {
              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
          document.getElementById("conteneur").className = "outDiv";
          document.getElementById("msg").innerHTML += " (conteneur out)";
      }
 
      function over1(e) {
        // action
        document.getElementById("conteneur").className = "overDiv";
        document.getElementById("msg").innerHTML += " (conteneur over)";
 
        // on stop la propagation de tous les éléments enfants
        if(e.cancelBubble) {
              e.cancelBubble = true;
        }
        else {
              e.stopPropagation();
        }
 
        return;
      }
 
      function out2(id) {
        // action
        document.getElementById(id).className = "outSpan";
        document.getElementById("msg").innerHTML += " (span out)";
        return;
      }
 
      function over2(id) {
        // action
        document.getElementById(id).className = "overSpan";
        document.getElementById("msg").innerHTML += " (span over)";
        return;
      }
    </script>
  </head>
 
  <body>
   <div style="padding:100px;width:400px;height:400px;background-color:green;">
    <div id="conteneur" class="outDiv" style="width: 200px;border:2px solid #666DDD">
      <table>
          <tr>
            <td>
            <span id="span1" name="highlight" class="outSpan" style="color: #0000FF; font-weight: bold">
                contenu du span 1
            </span>
          </td>
          <td>
            <span id="span2" name="highlight" class="outSpan" style="color: #0000FF; font-weight: bold">
                contenu du span 2
            </span>
          </td>
        </tr>
        <tr>
            <td colspan=2>
            <div id="div1" name="highlight" class="outSpan" style="color: #0000FF; font-weight: bold">
                contenu du div 1
            </div>
          </td>
        </tr>
        <tr>
          <td colspan=2>
            <span id="span3" name="highlight" class="outSpan" style="color: #0000FF; font-weight: bold">
                contenu du span 3
            </span>
          </td>
        </tr>
      </table>
    </div>
 
    <p id="msg"></p>
  <div>
    <script type="text/javascript">
 
      // ajout event listener sur conteneur
      var conteneur = document.getElementById("conteneur");
      conteneur.onmouseover = function(e) {
          over1(e);
      }
      conteneur.onmouseout = function(e) {
          out1(e);
      }
 
      // ajout event listener sur les spans
      var spans = document.getElementsByName("highlight");
      for (var i=0; i<spans.length; i++) {
        var span = spans[i];
        span.onmouseover = function() {
            over2(this.id);
        }
        span.onmouseout = function() {
            out2(this.id);
        }
      }
    </script>
 
  </body>
</html>

Dans cet exemple un poil plus complexe, il arrive qu'un mouseout attendu au niveau du conteneur ne se produise pas.

**le_chomeur** · 06/02/2008, 12h51

Je le sens mal lol... je regarde ce soir ou dès que j'ai un peu plus de temps car la ça m'a l'air déja plus complexe que la solution que je t'ai envoyé ^^

**Auteur** · 06/02/2008, 12h59

Envoyé par le_chomeur

Je le sens mal lol... je regarde ce soir ou dès que j'ai un peu plus de temps car la ça m'a l'air déja plus complexe que la solution que je t'ai envoyé ^^

dommage que l'on ait pas profité de la solution envoyée

le_chomeur : tu pourrais poster le code en question ? (je suis curieux de le voir, et j'aimerais bien l'étudier

)

**picwic** · 06/02/2008, 13h14

Envoyé par le_chomeur

Je le sens mal lol...

yep c'est pas gagné c't'affaire.

Envoyé par le_chomeur

je regarde ce soir ou dès que j'ai un peu plus de temps car la ça m'a l'air déja plus complexe que la solution que je t'ai envoyé ^^

Je vais en profiter pour bosser un peu.... mdr

**le_chomeur** · 06/02/2008, 14h45

Code :

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

1
2
 
Le_chomeur : tu pourrais poster le code en question ? (je suis curieux de le voir, et j'aimerais bien l'étudier  )

Aie j'ai supprimé tous mes MP car je n'avais plus de place juste après l'envois du message , picwic peux tu mettres ce que je t'ai envoyé ?

Sinon niveau algo :

je récupère uniquement le mouseover sur le div et annile les autres over / out de ce qu'il contient

et récupère le mouseout a la sortie normale

**picwic** · 06/02/2008, 16h26

Pour Auteur, je poste le message de le_chomeur :

Envoyé par le_chomeur

Voila , j'ai repris une partie du code que tu avais fais , ( je n'ai pas utiliser ma méthode, car en relisant ton post j'ai vu que tu avais d'autre élément a l'intérieur de tes divs et avec ma méthode il aurais fallut utiliser une fonction récursive pour bloquer tous les évènements des enfant

Donc je bloque l'évènement du parent simplement ^^

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
 
<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(e) {
          // action
         this.className = "overDiv";
        document.getElementById("msg").innerHTML += " (div over)";
 
        //On stop la propagation de tous les éléments enfant
        if(e.cancelBubble)
        {
              e.cancelBubble = true;
        }
        else {
              e.stopPropagation();
        }
 
        return;
      }
    </script>
  </head>
 
  <body>
   <div style="width:400px;height:400px;background-color:green;">
    <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>
      <div style="width:40px;height:40px;background-color:yellow;">
      </div>
      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>
  <div>
    <script type="text/javascript">
      var div=document.getElementById("div");
      div.addEventListener("mouseover", over1, false);
      div.addEventListener("mouseout", out1, false);
    </script>
 
  </body>
</html>

je pense que c'est le résultat escompté :

survol de la div verte : rien
survol de la div souhaité : rouge
survol des éléments a l'intérieur ( n'importe lesquels , la div reste rouge !
survol en dehors de la div : elle redevient normal

En espérant avoir bien situé ton problème

**Auteur** · 06/02/2008, 18h04

Envoyé par picwic

Pour Auteur, je poste le message de le_chomeur :

merci

je vais étudier ça

**picwic** · 26/02/2008, 21h58

Envoyé par Auteur

merci

je vais étudier ça

Alors cette étude, ça avance?!

**Auteur** · 26/02/2008, 22h42

Envoyé par picwic

Alors cette étude, ça avance?!

Non, je n'ai pas eu le temps de m'en occuper.

Il faut que je reprenne le sujet au début, je l'ai complètement oublié.

**picwic** · 29/02/2008, 13h31

En relisant l'article fort instructif sur les évènements du site quirksmode.org, je viens finalement de trouver La solution qui me convient parfaitement :

- détection du browser
- si IE => on utilise les events mouseenter / mouseleave
- sinon => on utilise les events mouseover / mouseout

Tout bête quoi..

Un grand merci aux participants !!

+

onmouseover imbriqués et IE6

JavaScript

Discussions similaires

Partager

Partager