Ajout événement onclick à objet DIV

Version imprimable

Bonjour,

Je souhaite affecter l'événement "onclick" par exemple sur différents éléments DIV de ma page, comme le montre le code source ci-dessous. Les DIV ajoutés à ma page HTML sont des éléments avec un largeur et hauteur de 20px et une bordure de 1px.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function init() { // + -------------------------------------- // + Ajout des elements dans la page // + -------------------------------------- obj_pere = document.getElementById('main'); var obj_fils = document.createElement('DIV') obj_fils.setAttribute("id","div_1"); obj_fils.indice="essai_1"; obj_fils.setAttribute("onclick",function(){alert(this.indice)}); obj_fils.onclick=function(){alert(this.indice)} obj_pere.appendChild(obj_fils); obj_fils=null; obj_fils = document.createElement('DIV') obj_fils.setAttribute("id","div_2"); obj_fils.indice="essai_2"; obj_fils.setAttribute("onclick",function(){alert(this.indice)}); obj_fils.onclick=function(){alert(this.indice)} obj_pere.appendChild(obj_fils); }
Sous FF, cela marche très, cela marche aussi sous IE mais sous ce dernier, il faut cliquer dans le coin en haut à gauche du DIV pour que cela marche. Si on clique au milieu, cela ne marche pas. Ou se trouve le pb avec IE ?

Merci d'avance.

Code:

1
2
	obj_fils.setAttribute("onclick",function(){alert(this.indice)}); // A enlver : redondance
	obj_fils.onclick=function(){alert(this.indice)}

Ok pour la redondance de la fonction.
Mais le problème est toujours là. Quand je lance ma page html, j'ai deux carrées (2 div) avec une bordure de 1px qui apparaissent. Et je suis obligé de cliquer en haut à gauche sur la bordure pour que les messages apparaissent. Or sous FF, je peux cliquer n'importe où sur les carrée.

Ci-dessous le code complet de ma page test.

Code:

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
 
<!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" />
		<link rel="stylesheet" href="./css/index.css" type="text/css" media="screen" charset="utf-8" />
		<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
		<title>Navigation</title>
		<script>
			function init() {
 
			// + --------------------------------------
			// + Ajout des elements dans la page
			// + --------------------------------------
			obj_pere = document.getElementById('main');
 
			var obj_fils = document.createElement('DIV')
			obj_fils.setAttribute("id","div_1");
			obj_fils.indice="essai_1";
			obj_fils.onclick=function(){alert(this.indice)}  
			obj_pere.appendChild(obj_fils);
 
			obj_fils=null;
			obj_fils = document.createElement('DIV')
			obj_fils.setAttribute("id","div_2");
			obj_fils.indice="essai_2";
			obj_fils.onclick=function(){alert(this.indice)}  
			obj_pere.appendChild(obj_fils);
 
			}
		</script>
 
		<!-- Feuille de style -->
		<style type="text/css" media="screen">
 
			body {background-color:#000000;}
 
			#main {
 				background-color:#FF0000;
				width:10px; height:10px;
				font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; color:#FFFFFF;
			}
 
			#div_1, #div_2 {
			z-index:5; width:30px; height:30px; position:absolute;
			border:1px #ffffff solid; margin:5px;
			}
 
			#div_1 { top:100px; left:100px; }
 
			#div_2 { top:100px; left:150px; }
 
		</style>
 
	<body>
		<div id='main' onclick="javascript:init();">Insertion</div>
	</body>
</html>

Merci de votre aide.

25/10/2006, 14h52
sbernard

Trouvé le pb. Il manquait window.attachEvent et window.addEventListener
25/10/2006, 15h13
FremyCompany

Citation:

Envoyé par sbernard

Trouvé le pb. Il manquait window.attachEvent et window.addEventListener

??