Onclick non pris en compte sur une div ( sous IE7)

**le_chomeur** · 22/09/2008, 13h40

salut à tous ^^

je n'arrive pas a comprendre pourquoi mon onclick n'est pris en compte QUE sur la bordure sous ie7 :-/ première fois que ça m'arrive... :

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
 
<!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>
<script type="text/javascript">
	var Animation = function(element){
		this.element = element;
		this.id = element.id;
		this.x = 0;
		this.y = 0 ;
		this.css = this.element.style ;
		this.timer = null;
	}
	Animation.prototype = {
		moveTo : function(){
			try{
			if(this.x < 500){
				this.x += 10 ;
				this.css.left = this.x + "px";
				var temp = this;
				this.timer = setTimeout(function(){temp.moveTo();},10);
			}
			else{
				clearTimeout(this.timer);
				alert('stop');
			}
			}
			catch(err){
				alert(err.message);
			}
		},
		getProperty : function(property){
 
			alert(this.css.left);
 
		}
	};
 
	function gogo(){
		try{
		MonAnim.getProperty();
		MonAnim.moveTo();
		}
		catch(err){
			alert(err.message);
		}
	}
</script>
</head>
 
<body>
<div id="test" style="position:absolute;display:block;left:0px;border:1px solid red;width:50px;height:50px;" onclick="gogo();">
</div>
<script type="text/javascript">
	var MonAnim = new Animation(document.getElementById('test'));
</script>
</body>
</html>

**Auteur** · 22/09/2008, 14h42

bonjour,

le problème vient de la propriété position:absolute et du fait que le div est vide.

donc si tu as :

Code html :

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

1
2
3
4
 
<div id="test" style="position:absolute;display:block;left:10px;border:1px solid #FF0000;width:50px;height:50px;" onclick="gogo()">
bla bla bla bla bla
</div>

tu pourras cliquer dans le div.

si :

tu as défini position: absolute et pas de texte dans le div
tu ne pourras pas cliquer dans le div
tu as défini position: absolute et du texte dans le div
tu pourras cliquer dans le div (c'est ton cas)
tu n'as pas défini position: absolute et pas de texte dans le div
tu pourras cliquer dans le div
tu n'as pas défini position: absolute et du texte dans le div
tu pourras cliquer dans le div

**le_chomeur** · 22/09/2008, 14h44

effectivement... j'ai trouvé une autre solution abérente :

mettre un background-color dans le style

toujours avec une div en absolute et sans texte...
j'aimerais bien comprendre ...

**Auteur** · 22/09/2008, 14h52

Regarde la forme du curseur sur le div quand tu as un position:absolute et quand tu ne l'as pas...

Si tu as défini l'attribut, le curseur est une flèche, si tu ne l'a pas défini, le curseur a la forme d'un I (comme dans une zone d'édition).

**le_chomeur** · 22/09/2008, 14h55

heu non , j'ai le même curseur : une flèche ...
ça n'explique toujours pas pourquoi en mettant une propriété de style : background-color, ça permet de clicker sur la div ^^

**Auteur** · 22/09/2008, 15h04

un début de réponse grâce aux événements onmouseover et onmouseout :

Code html :

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

1
2
3
4
 
<div id="test" style="position:absolute;display:block;left:10px;border:10px solid #FF0000;width:50px;height:50px;" onmouseover="alert('over')" onmouseout="alert('out')">
 
</div>

J'ai mis une bordure de 10 pixels. Passe sur la bordure et reste sur celle-ci : tu réalise un over (logique). Maintenant tout en allant dans le div sors de la bordure, tu réalises un out. Tu es pourtant dans le div et tu as déclenché l'événement onmouseout !!

Dans ce cas le div n'est ... que la bordure

Sans doute parce que le div est transparent, donc quand tu sors de la bordure et que le div ne contient rien, tu sors du div.

**Auteur** · 22/09/2008, 15h32

Plus tordu maintenant.

Ajoute des <br> après tes balises script :

Code :

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

1
2
3
4
5
6
7
8
 
<div id="test" style="position:absolute;display:block;left:10px;border:1px solid #FF0000;width:50px;height:50px;" onclick="gogo()">
 
</div>
<script type="text/javascript">
	   var MonAnim = new Animation(document.getElementById('test'));
</script>
<br><br><br><br><br>

clique dans le div (pas sur la bordure) : ton div défilera.

Autre expérience : encadre ton div d'un div "fixe" :

Code html :

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

1
2
3
4
5
6
 
<div style="border:1px solid #0000FF;height:50px;">
<div id="test" style="position:absolute;display:block;left:10px;border:1px solid #FF0000;width:50px;height:50px;" onclick="gogo()">
 
</div>
</div>