onmouseover onmouseout sur des éléments imbriqués

**Auteur** · 06/08/2008, 12h25

Envoyé par Maxoo

Bon, ben

Je viens de voir un script en ligne chez alsa creation qui m'a troublé ... chez eux ça marche simplement, sans faire quoi que ce soit.

(...)

Si vous le testez, vous allez voir qu'en passant sur le div et en se balandant dedans, vous allez voir je ne sais pas combien de fois que vous sortez du div 1 pour y ré-entrer, mais le div 1 ne se cache jamais. Sauf si on sort vraiment du div 1 ...

J'ai pisté le code sur mon appli et sur ce test : on fait bien un mouseout du div1 qui cache réellement le div, puis un over du div1 qui réaffiche le div 1

Javascript c'est crado non ? On ne voit rien, c'est imperceptible, et c'est le comportement par défaut du navigateur et de JS.

Disons que l'appel des événements est tellement rapide que tu ne t'aperçois de rien, sauf si l'exécution du code qui suit les appels est un peu long.

Il fonctionne comme le code que j'ai posté au début de ce sujet : tu vois bien que les bordures des div changent alternativement de couleurs, mais en réalité tu as bien la succession des événements (div 1 out, div 2 over, div 1 over).

Pour le fun, voici un script (utilisant une tempo de 5ms) avec 20 div imbriqués (les div sont créés par une fonction) :

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
 
<!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="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
<!--
var tempo = null; 
var inDiv = false;
 
function evOut(objet)
{
  if (tempo==null)
  {
    inDiv = false;
    tempo = setTimeout("evOutTimer()","5");
  }
} 
 
function evOutTimer()
{
  document.getElementById("messageSortie").innerHTML += "(out) ";
  tempo = null;
}
 
function evOver(objet)
{
  if (tempo!=null)
  {
    clearTimeout(tempo);
    tempo = null;
  }
 
  if (inDiv)
    return false;
 
  inDiv = true;
 
  document.getElementById("messageSortie").innerHTML += "("+objet.id+" over) ";
} 
 
 
function creationDiv()
{
  var parent = document.body;
  var i, noeud;
 
  for (i=0; i<20; i++)
  {
    noeud = document.createElement("div");
    noeud.style.border = "#AAAAAA solid 1px";
    noeud.style.margin = "0px";
    noeud.style.padding = "15px";
 
    this.identifiant = "div"+i;
    this.objet = noeud;
    noeud.id = this.identifiant;
    noeud.onmouseover = function(){evOver(this);};
 
    if (i==0)
      noeud.onmouseout = function(){evOut(this);};
 
    parent.appendChild(noeud);
    parent = noeud;
 
  }
 
  noeud = document.createElement("div");
  this.identifiant = "messageSortie";
  noeud.id = this.identifiant;
  document.body.appendChild(noeud);
}
//-->
</script>
 
</head>
 
<body onload="creationDiv()">
 
 
 
</body>
</html>

En ce qui me concerne, je préfère utiliser une tempo, plutôt que onmousemove. La tempo ne prend que 5ms par contre onmousemove appelle continuellement une fonction, ce qui est pour moi un inconvénient

**le_chomeur** · 06/08/2008, 12h55

Maxoo , lol vire les évènements lié a la propagation et tu verras si cela marche ou pas

compatible IE et firefox à ma connaissance

**Maxoo** · 06/08/2008, 14h11

Envoyé par le_chomeur

Maxoo , lol vire les évènements lié a la propagation et tu verras si cela marche ou pas

compatible IE et firefox à ma connaissance

C'est ce que j'ai fait, et c'est bien pour ça que je t'ai répondu. Moi je ne vois aucune différence avec ou sans les cancelbubble

**Maxoo** · 06/08/2008, 14h14

Envoyé par Auteur

En ce qui me concerne, je préfère utiliser une tempo, plutôt que onmousemove. La tempo ne prend que 5ms par contre onmousemove appelle continuellement une fonction, ce qui est pour moi un inconvénient

Mais en fait, tu n'as rien à faire ... ça marche tout seul, sauf qu'il faut bien mettre mouseover et mouseout (ce que je n'avais pas fait sur mon script perso)

Donc ça marche tout seul, c'est juste que javascript fait des trucs bizarre, et la question que je me pose : c'est bien géré par le moteur, ou si on doit cacher/afficher toute une page on va le voir "clignoter" ??

parce que là du coup on passe par les timer et la solution d'Auteur marche impecc.

**Auteur** · 06/08/2008, 14h41

Envoyé par Maxoo

Donc ça marche tout seul, c'est juste que javascript fait des trucs bizarre, et la question que je me pose : c'est bien géré par le moteur, ou si on doit cacher/afficher toute une page on va le voir "clignoter" ??

En fait si tu fais un display block/none je ne pense pas que tu verras un "clignotement" dans la mesure où le contenu à afficher ou cacher est déjà charger dans la page.

En guise de test j'ai repris ce code utilisant les timer et j'ai modifié le switch dans la fonction evOver(objet) par ce code :

Code javascript :

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
 
  switch (objet.id)
  {
    case "div1" : 
      document.getElementById("messageSortie").innerHTML += "(div1 over) ";
      break;
    case "div2" : 
      document.getElementById("messageSortie").innerHTML += "(div2 over) ";
      break;
    case "div3" : 
 
          var parent = document.body;
          var i, noeud;
 
          for (i=0; i<500; i++)
          {
            noeud = document.createElement("div");
            noeud.style.border = "#AAAAAA solid 1px";
            noeud.style.margin = "0px";
            noeud.style.padding = "15px";
 
            this.identifiant = "nouveauDiv"+n;
            this.objet = noeud;
            noeud.id = this.identifiant;
            noeud.innerHTML = this.identifiant;
            n++;
 
            parent.appendChild(noeud);
          }
          document.getElementById("messageSortie").innerHTML += "(div3 over) ";
      break;
  }

(n est une variable globale initialisée à 0)

Lors de chaque survol du div3, je créé 500 div. Ca passe comme une lettre à la poste

**le_chomeur** · 07/08/2008, 10h22

voila un exemple avec la stopPropagation ( a testé sous firefox donc !! )

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
 
<body>
<div style="width:250px;height:250px;background:green;padding:50px;" id="test">
	<div style="width:150px;height:150px;background:red;padding:50px;" onmouseover="this.style.backgroundColor='#00CCFF'" onmouseout="this.style.backgroundColor='red'">
        	<div style="width:50px;height:50px;background:yellow;padding:50px;">
            	toto
            </div>
    </div>
</div>
<script type="text/javascript">
document.getElementById('test').addEventListener( 'mouseout', function(e){e.stopPropagation();}, true );
</script>
</body>
</html>

ce code anihile l'évènement onmouseout :

on rentre dans la div rouge , le mouseover fonctionne

on en sort, le mouseout est avorté

je pense que c'est le fonctionnement que vous souhaitiez ?

**Maxoo** · 07/08/2008, 10h54

Envoyé par le_chomeur

on rentre dans la div rouge , le mouseover fonctionne

on en sort, le mouseout est avorté

je pense que c'est le fonctionnement que vous souhaitiez ?

C'est pas du tout ce qu'on cherche depuis le début

Bon, ce qu'on voulait : c'est que quand on rentre dans le div1 on ai un mouseover, quand on en sorte on ai un mouseout, mais que quand on passe du div1 au div2, on ai pas de div1_mouseout, div2_mouseover, div1_mouseover mais juste un div2_mouseover.

Voila.

**le_chomeur** · 07/08/2008, 10h57

tous mes pardons ^^

**Auteur** · 08/08/2008, 15h24

voici un script qui

n'utilise pas de timer ;
n'utilise pas les méthodes stoppropagation ou cancelbubble ;
n'utilise pas l'événement onmousemove ;
n'utilise pas l'événement onmouseout (si, si vous avez bien lu !) et pourtant le mouseout est détecté

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
 
<!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="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
<script type="text/javascript">
<!--
var tabEvent = new Array("-","-","-","-","-"); //0,1,2,3,4
var overDiv = false;
 
function razTabEvent()
{
  var i;
  for (i=0; i<tabEvent.length;i++)
    tabEvent[i]="-";
}
 
 
function gestionEv(objet,index)
{   
  var n;
 
  if (index>=1)
    overDiv = true;
 
  if (!overDiv)
    return true;
 
 
  tabEvent[index] = "("+objet.tagName+")";
  if (tabEvent[0]!="-")
  {
    n = 0;
    while (tabEvent[n]!="-" && n<tabEvent.length)
      n++;
    n--;
 
    switch (n)
    {
      case 0:
          overDiv = false;
          document.getElementById("msg").innerHTML += "(out) ";
          break;
      case 1:
          document.getElementById("msg").innerHTML += "(over div 1) ";
          break;
      case 2:
          document.getElementById("msg").innerHTML += "(over div 2) ";
          break;
      case 3:
          document.getElementById("msg").innerHTML += "(over div 3) ";
          break;
      case 4:
          document.getElementById("msg").innerHTML += "(over div 4) ";
          break;
 
    }
    //document.getElementById("msg").innerHTML += tabEvent+"<br>";
 
    razTabEvent();
  }
}
 
//-->
</script>
 
</head>
 
<body onmouseover="gestionEv(this, 0)">
 
      <div onmouseover="gestionEv(this, 1)" style="border: 1px solid #0000FF; width:400px; padding:10px">
        div 1
        <div onmouseover="gestionEv(this, 2)" style="border: 1px solid #AAAAAA; padding:10px; width:300px">
          div2
          <div onmouseover="gestionEv(this, 3)" style="border: 1px solid #AAAAAA; padding:10px; width:200px">
            div3
            <div onmouseover="gestionEv(this, 4)"  style="border: 1px solid #AAAAAA; padding:10px; width:100px">
              div 4
            </div>
          </div>
        </div>
      </div>
 
 
<div id="msg"></div>
 
</body>
</html>

Ce que je fais : j'enregistre les événements onmouseover dans un tableau : tabEvent.
Vous pouvez afficher son contenu en supprimant le commentaire devant cette ligne :

Code :

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

//document.getElementById("msg").innerHTML += tabEvent+"<br>";

A chaque événement onmouseover sur un div et le body correspond un index (0 pour le parent -> index le plus élevé pour le dernier enfant).
Sachant que l'événement onmouseover sur le body se produit toujours en dernier, j'attends qu'il se produise, d'où cette condition :

Code javascript :

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

1
2
3
4
5
6
 
if (tabEvent[0]!="-")
{
 
 
}

La boucle while dans cette condition me permet de connaître quel est l'objet qui a déclenché la cascade des événements. C'est le dernier objet détecté dans le tableau qui est la source de l'événement.
Si dans mon tableau, je ne trouve que l'événement onmouseover du body, c'est que je suis sorti de mon groupe de div

Maintenant, un dernier détail : L'événement onmouseover sur le body se produira si la souris survole les autres éléments contenus dans la page.
Pour éviter cela j'utilise un drapeau : overDiv qui sera à true dès que j'entre dans le groupe de div et qui passe à false dès que j'en sors.

Fonctionne sous IE 5, 7 (et donc doit logiquement fonctionner sous IE6 ) et FF 2.

A tester sous IE 6, FF 3, Opera, Konqueror et Safari.

**Auteur** · 09/08/2008, 22h55

Dans ce dernier script, je n'utilise qu'un événement et dans ce cas je me demande si cancelbubble et stoppropagation n'aurait finalement pas leur place.

J'ai vu qu'il existait également

Code :

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

1
2
 
event.returnValue = false; // pour IE

ou

Code :

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

1
2
 
event.preventDefault();  // Firefox

qui permet d'annuler un événement. Je ne sais pas si ces méthodes fonctionnent avec d'autres navigateurs (Safari, Konqueror, Opera), mais c'est peut-être une piste à étudier.

onmouseover onmouseout sur des éléments imbriqués

JavaScript

Discussions similaires

Partager

Partager