StopPropagation

**le_chomeur** · 29/01/2009, 14h51

Salut a tous , bon j'aurais besoins d'un coup de main , je cherche a anihiler le survol sur une div mais malgrès l'appel de l'évènement , l'action définit dans la li mètre est appelée voici le code :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.imageList{
				width:120px;
			}
			.imageList li{
				position:relative;
				overflow:hidden;
				height:120px;
				border:1px solid #666;
			}
			.actionImg{
				border-top:1px solid #666;
				width:100%;
				display:block;
				height:34px;
				position:absolute;
				left:0px;
			}
		</style>
 
		<script type="text/javascript">
			var timer = null;
			function seeActionImage(elementToSee,voir){
				var MaDiv = elementToSee.getElementsByTagName('div')[0];
				if(timer == null){
					timer = setInterval(function(){openAction(MaDiv,voir)},10);
				}
			}
			function openAction(MaDiv,voir){
				if(voir && parseInt(MaDiv.style.bottom) < 0){
					MaDiv.style.bottom = parseInt(MaDiv.style.bottom)+4 +"px";
				}
				else if(!voir && parseInt(MaDiv.style.bottom) > -34){
					MaDiv.style.bottom = parseInt(MaDiv.style.bottom)-4 +"px";
				}
				else{
					clearInterval(timer);
					timer = null;
				}
			}
 
 
			function load() {
				elem2 = document.getElementById("tbl1");
				elem2.addEventListener("mouseover", stopEvent, false);
				elem2.addEventListener("mouseout", stopEvent, false);
			}
 
			function stopEvent(ev) {
			  //On stop les évènements pour les enfants
			  ev.stopPropagation();
			  document.getElementById('debug').innerHTML += "<br />"+ev.type ;
			}
 
		</script>
	</head>
	<body onload="load()">
		<ul class="imageList">
		<li onmouseover="seeActionImage(this,true);" onmouseout="seeActionImage(this,false);" id="tbl1">
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" id="laDiv" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
		</ul>
		<div id="debug"></div>
	</body>
</html>

je souhaite au final pouvoir survolé mon image , et que la barre en bas apparaisse et clické sur les icones ... la barre de menu ne doit partir qu' mouseout du li ...

**marcha** · 29/01/2009, 15h48

Salut,

Joli casse-tête :-)

J'ai pas trouvé de solution propre avec stopPropagation, il serait éventuellement
possible de retarder les mouseout de quelques milisecondes et les annuler si
il y a un mouseover rapproché.

J'ai essayé d'assigner mouseover mouseout a tous les enfants et de faire un
stopPropagation mais on a le même problème.

Alors j'ai cherché dans une autre voie, que voici:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.imageList{
				width:120px;
			}
			.imageList li{
				position:relative;
				overflow:hidden;
				height:120px;
				border:1px solid #666;
				background-color: #ff0;
			}
			.actionImg{
				border-top:1px solid #666;
				width:100%;
				display:block;
				height:34px;
				position:absolute;
				left:0px;
			}
		</style>
 
		<script type="text/javascript">
			var timer = null;
			var old_in = false;
 
			function seeActionImage(event) {
				var obj = event.target;
				while(obj && obj.nodeName!='LI') obj = obj.parentNode;
				var px = obj.offsetLeft;
				var py = obj.offsetTop;
				var mx = event.pageX - px;
				var my = event.pageY - py;
				var is_in = mx>=0 && my>=0 && mx<obj.offsetWidth && my<obj.offsetHeight;
				document.getElementById('debug').innerHTML = is_in + ' ' + mx + ' ' + my + ' ' + obj.offsetWidth + "<br />";
				if(is_in != old_in) {				
				  var MaDiv = obj.getElementsByTagName('div')[0];
				  if(timer) clearInterval(timer);
				  timer = setInterval(function(){openAction(MaDiv, is_in)},10);
			      old_in = is_in;
				}
			}
 
			function openAction(MaDiv,voir){
				if(voir && parseInt(MaDiv.style.bottom) < 0){
					MaDiv.style.bottom = parseInt(MaDiv.style.bottom)+4 +"px";
				}
				else if(!voir && parseInt(MaDiv.style.bottom) > -34){
					MaDiv.style.bottom = parseInt(MaDiv.style.bottom)-4 +"px";
				}
				else{
					clearInterval(timer);
					timer = null;
				}
			}
 
			function load() {
				var e = document.getElementById('tbl1');
				e.addEventListener("mouseover", seeActionImage, false);
				e.addEventListener("mouseout", seeActionImage, false);
			}
 
		</script>
	</head>
	<body onload="load()">
		<ul class="imageList">
		<li id="tbl1">
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" id="laDiv" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
		</ul>
		<div id="debug"></div>
	</body>
</html>

**SpaceFrog** · 29/01/2009, 15h52

et cancelBubble ?

**le_chomeur** · 29/01/2009, 16h10

cancelBuble , m'a posé quelque soucis sous ie ( va savoir pourquoi ^^ )

voila ou j'en suis :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.imageList{
 
			}
			.imageList li{
				position:relative;
				overflow:hidden;
				height:120px;
				width:120px;
				border:1px solid #666;
				padding:5px;
				margin:5px;
			}
			.actionImg{
				border-top:1px solid #666;
				border-left:1px solid #666;
				border-right:1px solid #666;
				width:120px;
				display:block;
				height:34px;
				position:absolute;
				left:5px;
				background-color:#666;
				opacity:0.5;
			}
		</style>
 
		<script type="text/javascript">
			var timer = null;
			function seeActionImage(elementToSee,voir){
				var MaDiv = elementToSee.getElementsByTagName('div')[0];
				if(timer == null){
					timer = setInterval(function(){openAction(MaDiv,voir)},10);
				}
			}
			function openAction(MaDiv,voir){
				if(voir && parseInt(MaDiv.style.bottom) < 0){
					MaDiv.style.bottom = parseInt(MaDiv.style.bottom)+4 +"px";
				}
				else if(!voir && parseInt(MaDiv.style.bottom) > -34){
					MaDiv.style.bottom = parseInt(MaDiv.style.bottom)-4 +"px";
				}
				else{
					clearInterval(timer);
					timer = null;
				}
			}
 
 
			function load() {
 
				      var div=document.getElementById("tbl1");
      				  div.addEventListener("mouseover", over1, false);
                      div.addEventListener("mouseout", out1, false);
 
			}
 
			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 != 'tbl1') {
              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
          seeActionImage(this,false)
          document.getElementById("debug").innerHTML += " (div out)";
      }
 
      function over1(e) {
          // action
        seeActionImage(this,true)
        document.getElementById("debug").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 onload="load()">
		<ul class="imageList">
		<li id="tbl1">
			<img src="images/im5.jpg" width="120px" />
			<div class="actionImg" id="laDiv" style="bottom:-34px;">
				<img src="commentaire.png" width="30px" />
			</div>
		</li>
		</ul>
		<div id="debug"></div>
	</body>
</html>

obligé de laissé un espace a l'intérieur du li sinon le mouseout n'est pas pris en compte.

j'avais déja pensé a gérer un timer selon le mouse over mais difficilement gérable a terme car il y auras jusqu'à une centaine d'éléments sur la page