onmouseover onmouseout sur des éléments imbriqués

**Maxoo** · 05/08/2008, 17h31

Envoyé par Auteur

Seul gros problème : les fonctions sont continuellement appelées

Bah c'est pareil avec la solution de Sub0, le onmousemove appelle continuellement les fonction ... ce qui est pas terrible à mon avis.

sachant que si tu as autre chose sur ton site qui touche au onmousemove ... je sais pas si ça passe super.

Je reste persuadé qu'il y a plus beaucoup mieux ... grrr ...

**Maxoo** · 05/08/2008, 17h37

Auteur>> ton script ne marche pas. Fait des += pour les innerHTML, tu verra que tu sors entre div parent et div enfant.

Par contre celle de Sub0 marche.

**Sub0** · 05/08/2008, 17h40

Si le onmousemove te gêne, pas de problème!

Il suffit de mettre la fonction à la suite dans les evènements :

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
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
var in1,in2,in3=false;
function mouseposition(){
 var str='';
 if(in1){ str=str+'->1';
   if(in2){ str=str+'->2';
     if(in3){ str=str+'->3';
     }
   }
 }
 document.getElementById("idDiv").innerHTML=str;
}
//-->
</script>
</head>
<body>
<div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;"
  onmouseover="in1=true;mouseposition();"
  onmouseout="in1=false;mouseposition();">
div 1
<div style="width: 100px; height: 100px; border: 1px #AAAAAA solid; margin:30px;" 
  onmouseover="in2=true;mouseposition();"
  onmouseout="in2=false;mouseposition();">
div 2
<div style="width: 50px; height: 50px; border: 1px #AAAAAA solid; margin:15px;" 
  onmouseover="in3=true;mouseposition();"
  onmouseout="in3=false;mouseposition();">
div 3
</div></div></div>
<div id="idDiv"></div>
</body>
</html>

**Auteur** · 05/08/2008, 17h43

Envoyé par Maxoo

Auteur>> ton script ne marche pas. Fait des += pour les innerHTML, tu verra que tu sors entre div parent et div enfant.

Par contre celle de Sub0 marche.

Mince

J'ai cru que cela marchait... je me suis fait avoir avec le changement de couleur des bordures qui se fait sans problème apparent

Quand je revois le script, je comprends mon erreur.

**Maxoo** · 05/08/2008, 18h07

J'ai juste rajouté la condition dont j'ai besoin : la sorti du div principal ... en fait c'est surtout ça que je veux.

et

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
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
var in1,in2,in3=false;
function mouseposition(){
 var str='';
 if(in1){ str=str+'->1';
   if(in2){ str=str+'->2';
     if(in3){ str=str+'->3';
     }
   }
 }else {
	str+='sorti';
}
 document.getElementById("idDiv").innerHTML+=str;
}
//-->
</script>
</head>
<body>
<div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;"
  onmouseover="in1=true;mouseposition();" onmouseout="in1=false;mouseposition();">
div 1
<div style="width: 100px; height: 100px; border: 1px #AAAAAA solid; margin:30px;" 
  onmouseover="in2=true;mouseposition();" onmouseout="in2=false;mouseposition();">
div 2
<div style="width: 50px; height: 50px; border: 1px #AAAAAA solid; margin:15px;" 
  onmouseover="in3=true;mouseposition();" onmouseout="in3=false;mouseposition();">
div 3
</div></div></div>
<div id="idDiv"></div>
</body>
</html>

Ca marche pas

On voit bien qu'on sort entre 1 et 2.

je m'explique. quand on fait un mouseover et mouseout ça fait ça :
over de 1
mouseposition qui marche
out de 1
mouseposition qui plante
over de 1
mouseposition qui marche
over de 2

quand tu passais avec des int1 et int2, ça faisait :
int 1 true
int 1 false
int 1 true
int 2 true
mouseposition --> qui marche.

Donc ta solution du onmousemove marche, mais pas ton dernier test. D'ailleurs je sais même pas pourquoi j'y ai cru, nous on arrive pas à le faire marcher et c'est pas en feintant en passant par des booléens

Bon ... bah bonne nuit hein ?

**Sub0** · 05/08/2008, 19h35

on voit bien ce qu'il se passe...
même en ajoutant des conditions, ça ne fonctionnera pas;
Le problème est que le mouseout du div1 précèdera toujours le mouseover du div2...

En fait, je n'ai pas d'autres solutions que d'utiliser onmousemove.
Faudra faire avec.

**Sub0** · 05/08/2008, 20h15

Envoyé par Maxoo

Moi je voyais l'intérêt d'un onmouseover qui ne fait appel qu'un fois quand il faut à la fonction ...

Selon moi, onmousemove consomme les mêmes ressources que les autres evènements, tant que l'on n'effectue aucun traitement...
A tout hasard, essayez ce code et dites moi si ça pourrait convenir à votre projet;
Cette fois, on utilise que le onmouseover pour appeller mouseposition :

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
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
var in1,in2,in3=false;
var str='';
function mouseposition(){
 if(in1) str+=' IN1 ';
 if(in2) str+=' IN2 ';
 if(in3) str+=' IN3 ';
 document.getElementById("idDiv").innerHTML=str;
}
//-->
</script>
</head>
<body>
<div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;"
  onmouseover="if(!in1 && !in2 && !in3){ in1=true;mouseposition(); }"
  onmouseout="in1=false;">
div 1
<div style="width: 100px; height: 100px; border: 1px #AAAAAA solid; margin:30px;" 
  onmouseover="if(!in1 && !in2 && !in3){ in2=true;mouseposition(); }"
  onmouseout="in2=false;">
div 2
<div style="width: 50px; height: 50px; border: 1px #AAAAAA solid; margin:15px;" 
  onmouseover="if(!in1 && !in2 && !in3){ in3=true;mouseposition(); }"
  onmouseout="in3=false;">
div 3
</div></div></div>
<div id="idDiv"></div>
</body>
</html>

Eventuellement, on peux ajouter onmouseout pour le div1...

**Auteur** · 05/08/2008, 21h23

Dans ce code HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<div style="width: 200px; height: 200px; border: 1px #AAAAAA solid;" onmouseover="over1();" onmouseout="out1();">
div 1
<div style="width: 100px; height: 100px; border: 1px #AAAAAA solid; margin:30px;" onmouseover="over2();" onmouseout="out2();">
div 2
<div style="width: 50px; height: 50px; border: 1px #AAAAAA solid; margin:15px;" onmouseover="over3();" onmouseout="out3();">
div 3
</div>
</div>
</div>

on peut considérer que les événements onmouseout sur le div 2 et sur le div 3 sont superflus, non ? Le div2 étant contenu dans le div1 et le div3 étant contenu dans le div2

En effet, le mouseout sur le div2 revient à un mouseover sur le div1 ou sur le div3. De même un mouseout sur le div3 revient à faire un mouseover sur le div2.

nous sommes donc débarrassés des événements onmouseout sur les div2 et div3

-------------------------------
Donc voici un code :

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
 
<!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 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;
  switch (objet.id)
  {
    case "div1" : 
      document.getElementById("messageSortie").innerHTML += "(div1 over) ";
      break;
    case "div2" : 
      document.getElementById("messageSortie").innerHTML += "(div2 over) ";
      break;
    case "div3" : 
      document.getElementById("messageSortie").innerHTML += "(div3 over) ";
      break;
  }
  
} 
 
//-->
</script>
 
</head>
 
<body>
 
 
<div id="div1" style="width: 200px; height: 300px; border: 1px #AAAAAA solid;margin-left:400px;" onmouseover="evOver(this)" onmouseout="evOut(this)">
  div 1
  <div id="div2" style="width: 100px; height: 100px; border: 1px #AAAAAA solid; margin:30px;" onmouseover="evOver(this)">
    div 2
    <div id="div3" style="width: 50px; height: 50px; border: 1px #AAAAAA solid; margin:15px;" onmouseover="evOver(this)">
      div 3
    </div>
  </div>
</div>
 
 
<div id="messageSortie"></div>
 
 
</body>
</html>

je n'ai conservé que l'événement onmouseout sur le div1 et supprimé les événements onmouseout sur le div2 et le div3.
j'ai triché aussi Pour que l'événement onmouseout ne se déclenche pas avant les événements onmouseover, j'ai ajouté un timer de 5ms .
j'ai ajouté un drapeau inDiv qui me permet de court-circuiter les autres événements onmouseover qui se propagent de l'élément enfant vers l'élément parent. Ce drapeau est réinitialisé dans la fonction evOut() (donc quand tu passes d'un élément à un autre).

**Sub0** · 05/08/2008, 21h30

Envoyé par Auteur

j'ai triché aussi Pour que l'événement onmouseout ne se déclenche pas avant les événements onmouseover, j'ai ajouté un timer de 5ms .

Tu as peut-être un peu triché, mais le résultat est nickel en tous cas!
C'est l'essentiel. A+

**Auteur** · 05/08/2008, 21h37

Envoyé par Sub0

Tu as peut-être un peu triché, mais le résultat est nickel en tous cas!
C'est l'essentiel. A+

Merci

Tu crois qu'un timer de 5ms est encore un timer, compte-tenu de sa durée ? De toute façon c'était le seul moyen de retarder le onmouseout

Bon il est clair qu'il ne s'agit pas de pas de passer d'un div à l'autre en moins 5ms

**Maxoo** · 05/08/2008, 21h38

Mouaiff mouaiff ...

Auteur >> oki, tu as super triché quoi

Sub0 >> pour moi ton code ne fonctionne pas. A la base on veut récupérer un mouse out sur le div 1 sans qu'il y ait un div out 1 quand on passe de 1 a 2. Et là j'y arrive pas.

Faut que je creuse le problème, car ça ne me convient pas.

**Auteur** · 05/08/2008, 21h47

Envoyé par Maxoo

Auteur >> oki, tu as super triché quoi

5 ms quand même, tu ne les vois même pas passer

Envoyé par Maxoo

Faut que je creuse le problème, car ça ne me convient pas.

En quoi cette temporisation te gène ? Là, je ne comprends plus ce que tu veux faire

J'ai essayé plusieurs trucs : dont un div "fantôme" qui vient se positionner sur le div parent.
Les div imbriqués ne gèrent que le onmouseover et le div "fantôme" gère le onmouseout. Seul souci : quand le div fantôme est au dessus des autres les événements onmouseover ne fonctionnent plus, de même quand le div "fantôme" est sous les autres div, l'événement onmouseout n'est pas géré.

**Sub0** · 05/08/2008, 21h47

Envoyé par Maxoo

pour moi ton code ne fonctionne pas. A la base on veut récupérer un mouse out sur le div 1 sans qu'il y ait un div out 1 quand on passe de 1 a 2. Et là j'y arrive pas.

Même la 1ère méthode que je vous ai proposé avec le onmousemove ?

**Maxoo** · 06/08/2008, 09h05

Envoyé par Sub0

Même la 1ère méthode que je vous ai proposé avec le onmousemove ?

Non celle là elle marche. C'est d'ailleurs la seule qui marche bien pour l'instant

**Maxoo** · 06/08/2008, 09h09

Envoyé par Auteur

En quoi cette temporisation te gène ? Là, je ne comprends plus ce que tu veux faire

C'est pas la tempo qui me gène, c'est plus tout ce que tu as fait autour pour enlever des mouseover ou out.

Pour faire le bilan il y a pour l'instant deux solutions qui marche :

En temporisant,
en passant avec un onmousemove

Moi pour l'instant je cherche une troisième méthode qui ferait appel genre à : on passe du div1 au div2 et il y a peut etre moyen de récupérer vers quel div on va, et avec cela on peut savoir si on va vers un div qui est enfant du div 1. Du coup on bloque l'action sur le mouseout.

Voila, j'ai du boulot ...

**Maxoo** · 06/08/2008, 10h46

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.

En y regardant de plus près j'ai adapté à notre script voila le résultat :

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
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function out1() {
document.getElementById("idDiv").innerHTML += "(div 1 out)<br>";
document.getElementById("div1").style.display = "none";
}
 
function over1() {
document.getElementById("idDiv").innerHTML += "(div 1 over)<br>";
document.getElementById("div1").style.display = "block";
}
//-->
</script>
</head>
<body>
 
<div id="div1" style="width: 200px; height: 200px; border: 1px #AAAAAA solid;" onmouseover="over1();" onmouseout="out1();">
	div 1
	<div style="background-color:#ccc;">
		div 2
	</div>
	<ul>
		<li>li 1</li>
		<li>li 2</li>
	</ul>
	<a href="">lien</a>, <strong>strong</strong>, <span>span</span>
</div>
 
<div id="idDiv"></div>
</body>
</html>

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.

Donc voila ... je sais plus trop quoi penser de javascript.

**le_chomeur** · 06/08/2008, 11h09

moi pas comprendre pourquoi ne pas utiliser les cancelbuble ^^

**Maxoo** · 06/08/2008, 11h13

Envoyé par le_chomeur

moi pas comprendre pourquoi ne pas utiliser les cancelbuble ^^

Si tu peux nous faire un exemple concret je veux bien, moi j'ai jamais réussi à les faire marcher :
Par de cet 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
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function out1() {
document.getElementById("idDiv").innerHTML += "(div 1 out)<br>";
document.getElementById("div1").style.display = "none";
}
 
function over1() {
document.getElementById("idDiv").innerHTML += "(div 1 over)<br>";
document.getElementById("div1").style.display = "block";
}
//-->
</script>
</head>
<body>
 
<div id="div1" style="width: 200px; height: 200px; border: 1px #AAAAAA solid;" onmouseover="over1();" onmouseout="out1();">
	div 1
	<div style="background-color:#ccc;">
		div 2
	</div>
	<ul>
		<li>li 1</li>
		<li>li 2</li>
	</ul>
	<a href="">lien</a>, <strong>strong</strong>, <span>span</span>
</div>
 
<div id="idDiv"></div>
</body>
</html>

Et met un cancelBubble pour qu'on voit que ça n'affiche plus de div1 out.

Merci

**le_chomeur** · 06/08/2008, 11h58

voici un exemple que j'avais réalisé sur ce forum

:

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>

**Maxoo** · 06/08/2008, 12h03

Ton cancelBubble ne fait rien c'est plutot

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
          // 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;
          }

Qui fait quelque chose ... c'est bien ce que je dis depuis le début.
Par contre ce bout de code est intéressant.

C'est cross-browser à fond ou pas du tout ??

onmouseover onmouseout sur des éléments imbriqués

JavaScript

Discussions similaires

Partager

Partager