Discussion :

[bastien]

Bonjour,

J'ai le code suivant qui ouvre une boite au dessus d'un iframe
appelé avec colorPickerNamespace.attachColorPicker()

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
var colorPickerNamespace = {
	cp:{},
 
	createColorPicker:function (){
		var imgBase = 'creating/';
 
			//On crée la fenêtre contenant le sélecteur de couleur
			var CE1=null;
			CE1=document.createElement("div");
			CE1.id='ColorPicker';
			document.getElementById("actbtn_color").insertBefore(CE1,null);
			var txt=document.createTextNode("Select color : ");
			document.getElementById("ColorPicker").appendChild(txt);
 
 
			var CE21=null;
			CE21=document.createElement("img");
			CE21.id='cp_ColorIcon';
			CE21.src=imgBase+'/cp_mini_icon.png';
			document.getElementById("ColorPicker").appendChild(CE21);
 
	},
 
	attachColorPicker:function(input, cmd, bColor)
	{
		 this.createColorPicker();
		 this.SetId(input)
		 this.showColorPicker();
		 this.SetEvents();
		 if(bColor==null ||bColor==""){this.cp.baseColor='#000000'}
	},
 
	SetEvents:function(){
		this.addEvt(this.cp.ColorPicker,"focus",this.showColorPicker);
		this.addEvt(this.cp.cpColorIcon,"click",this.hideColorPicker);
	},
 
	SetId:function(i){
		this.cp.cpInput=document.getElementById(i);
		this.cp.ColorPicker=document.getElementById("ColorPicker");
		this.cp.cpColorIcon=document.getElementById("cp_ColorIcon");
	},
 
	addEvt:function(o,e,f){ 
			if(window.addEventListener) o.addEventListener(e, f, false); 
				else o.attachEvent("on"+e,f);
	},
 
	hideColorPicker:function(){
		this.cp.ColorPicker.style.display  = 'none';
	},
 
	showColorPicker:function(){
		document.getElementById("ColorPicker").style.display  = 'block';
	}
 
 
}

La fenêtre apparait parfaitement, cependant, j'ai un souci avec la gestion des évènements.
En effet, lorsque je clique sur la fenêtre, le focus est donné à l'iframe en dessous et je ne parviens pas à fermer la fenêtre issue de colorPickerNamespace.

Pourquoi le focus n'est pas sur la fenêtre lorsque je clique dessus et pourquoi ne se ferme-t-elle pas lorsque je clique sur l'image cp_ColorIcon?

Un petit coup de main, svp
Merci.

[SpaceFrog]

stopPropagation et cancelBubble te permettront de bloquer l'effet du clic au niveau du div et ne pas qu'il se propage aux élément sous-jacents

[bastien]

Merci

mais j'utilise ces fonctions pour la première fois.

Où dois-je placer ce code dans mon espace ?

Code :

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

1
2
3
if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();

[bastien]

J'ai bien ajouter ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
	hideColorPicker:function(e){
		var event = e || window.event;  
		document.getElementById("ColorPicker").style.display  = 'none';  
		if (event.stopPropagation) {    
			event.stopPropagation();  
		} else {   
		event.cancelBubble = true;
		} 
 
	},

dons la focntion qui force la fermeture de la boite mais en fait, le curseur continue à passer sur l'iframe ????

En fait, je me rend copte que lm'évènement onclick sur le div n'est même pas reconnu car si j'ajoute :

Code :

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

alert("c cliqué!");

ici

Code :

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

1
2
3
4
5
6
7
8
9
10
11
	hideColorPicker:function(e){
		var event = e || window.event;  
alert("c cliqué!");
		document.getElementById("ColorPicker").style.display  = 'none';  
		if (event.stopPropagation) {    
			event.stopPropagation();  
		} else {   
		event.cancelBubble = true;
		} 
 
	},

la boite de dialogue contenant "c cliqué! n'apparait même pas lorsque je clique sur le div