Ajout événement onclick à objet DIV

**sbernard** · 24/10/2006, 16h10

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 :

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
 
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.

**FremyCompany** · 24/10/2006, 19h28

Code :

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

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

**sbernard** · 25/10/2006, 08h34

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 :

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
 
<!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.