conflit entre deux événement

Version imprimable

Bonjour,
il me semble qu' il y a conflit entre les deux événements suivants:

Code:

onclick="selectElement(this)" et onclick="selectelement_page(this)"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div class="container1" onclick="selectElement(this)"> <div class="sous_container1" onclick="selectElement_page(this)">sous bloc 1</div> <div class="sous_container2" onclick="selectElement_page(this)">sous bloc 2</div> <div class="sous_container3" onclick="selectElement_page(this)">sous bloc 3</div> </div> <div class="container2" onclick="selectElement(this)"> <div class="sous_container1" onclick="selectElement_page(this)">sous bloc 1</div> <div class="sous_container2" onclick="selectElement_page(this)">sous bloc 2</div> <div class="sous_container3" onclick="selectElement_page(this)">sous bloc 3</div> </div> <div class="container3" onclick="selectElement(this)"> <div class="sous_container1" onclick="selectElement_page(this)">sous bloc 1</div> <div class="sous_container2" onclick="selectElement_page(this)">sous bloc 2</div> <div class="sous_container3" onclick="selectElement_page(this)">sous bloc 3</div> </div>
le prémier événement
Code:

1 2 onclick="selectElement(this)"
permet de selectionner et de deplacer les containers.
ensuite le clic sur un sous container
Code:

1 2 onclick="selectElement_page(this)"
selectionne le sous container et fait un traitement(deplacement des sous container.
mais ce qui se passe c' est que si dans le container je garde l' événement
Code:

1 2 onclick="selectElement(this)"
dans le container alors l' événement
Code:

1 2 onclick="selectElement_page(this)"
est masqué .
si j' omets l' événement dans le container alors l' événement dans les sous container est visible ( existe).

la définitions de ces deux fonctions est:
Code:

1 2 3 4 5 6 7 8 9 10 11 dans un fichier javascript var current = null; function selectElement(element){ current = element ; } function selectElement_page(element){ current = element ; }
comment résoudre ce problème?

merci d' avance

14/04/2009, 13h06
Auteur

bonjour,

pour éviter la propagation du onclick de l'élément enfant vers l'élément parent, tu peux utiliser un drapeau comme dans cet exemple.

merci,

ça ne marche pas chez moi.

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
 
<div class="tests0" onclick="on_click(this)">
		<div class="menu_objets_item">
		    	          	   	     <div id="img0" class="menu_objets_item_g"></div>
		    	          	   	     <div class="menu_objets_item_d">container</div>
		    	          	   </div>
		    	          	   <div class="menu_objets_item_sm">
		    	          	   	     <span class="menu_objets_item_sm_item" onclick="on_click(this)">
		    	          	   	     	     <span class="menu_objets_item_sm_item_g"></span>
		    	          	   	           <span class="menu_objets_item_sm_item_d">
		    	          	   	               <a href=""><span>Enfant 1</span></a>
		    	          	   	           </span>
		    	          	   	           <div class="annule_float"></div>
		    	          	         </span>
		    	          	         <span class="menu_objets_item_sm_item" onclick="on_click(this)">
		    	          	   	     	     <span class="menu_objets_item_sm_item_g"></span>
		    	          	   	           <span class="menu_objets_item_sm_item_d">
		    	          	   	               <a href=""><span>Enfant 2</span></a>
		    	          	   	           </span>
		    	          	   	           <div class="annule_float"></div>
		    	          	         </span>
		    	          	         <span class="menu_objets_item_sm_item" onclick="on_click(this)">
		    	          	   	     	     <span class="menu_objets_item_sm_item_g"></span>
		    	          	   	           <span class="menu_objets_item_sm_item_d">
		    	          	   	               <a href=""><span>Enfant 3</span></a>
		    	          	   	           </span>
		    	          	   	           <div class="annule_float"></div>
		    	          	         </span>
 
		    	          	   </div>
 
	</div>

ma fonction est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function on_click(element){
				if(click_on){
 
					click_on = false;
					return false;
				}
				if(element.nodeName=="span"){
 
					click_on = true;
					return click_on;
				}else{
					return true;
				}
 
			}

quand je click aucune réaction.
merci d' avance.

un div dans un span 8O

Code:

1
2
3
4
5
6
7
8
		    	          	   	     <span class="menu_objets_item_sm_item" onclick="on_click(this)">
		    	          	   	     	     <span class="menu_objets_item_sm_item_g"></span>
		    	          	   	           <span class="menu_objets_item_sm_item_d">
		    	          	   	               <a href=""><span>Enfant 1</span></a>
		    	          	   	           </span>
		    	          	   	           <div class="annule_float"></div>
		    	          	         </span>

sinon comme ton onclick a lieu sur des éléments identiques (des div d'après ton 1er message) voici comment tu peux faire :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
 
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
.container1{
        width: 200px;
        heigth: 200px;
        border: 1px solid #000000;
}
 
.sous_container1, .sous_container2, .sous_container3{
        margin: 20px;
        border: 1px solid #FF0000;
}
-->
</style> 
 
<script type="text/javascript">
<!-- 
var clicDivEnfant = false;
function clic_1(objet)
{
        if (!clicDivEnfant)
        {
                selectElement(objet);
        }
        clicDivEnfant = false;
}
 
function clic_2(objet)
{
        clicDivEnfant = true;
        selectElement_page(objet);
}
 
 
var current = null;
function selectElement(element)
{
        alert("div parent");
        current = element ;
}
 
function selectElement_page(element)
{       
        alert("div enfant");
        current = element ;
}
 
 
//-->
</script>
 
</head>
 
 
<body>
 
<div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container1" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container2" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container3" onclick="clic_2(this)">sous bloc 3</div>
 
</div>
 
 
</body>
</html>

merci ça marche,
j' avais des div que j' ai remplacer par des span, c' est pourquoi ce div est resté dans le span.

Code:

1
2
3
4
5
6
7
8
 
<span class="menu_objets_item_sm_item" onclick="on_click(this)">
		    	          	   	     	     <span class="menu_objets_item_sm_item_g"></span>
		    	          	   	           <span class="menu_objets_item_sm_item_d">
		    	          	   	               <a href=""><span>Enfant 1</span></a>
		    	          	   	           </span>
		    	          	   	           <div class="annule_float"></div>
		    	          	         </span>

mais il se pose un autre problème , c'est que quand on sélectionne des enfants (sous container) de parents( container) différents les enfants restent sélectionner .
voici le code xhtml:

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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
 
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
.container{
	width: 200px;
	heigth: 200px;
	border: 1px solid #A3D413;
	margin-bottom:10px;
}
.container1{
	width: 200px;
	heigth: 200px;
	border: 1px solid #000000;
	margin-bottom:10px;
}
.container2{
	width: 200px;
	heigth: 200px;
	border: 1px solid #000000;
	margin-bottom:10px;
}
.container3{
	width: 200px;
	heigth: 200px;
	border: 1px solid #000000;
}
 
.sous_container1, .sous_container2, .sous_container3{
	margin: 20px;
	border: 1px solid #FF0000;
	margin-bottom:10px;
}
.sous_container{
	margin: 20px;
	border: 1px solid #FF0000;
	margin-bottom:10px;
}
.sous_container_on{
	margin: 20px;
	border: 1px solid #A3D413;
	margin-bottom:10px;
}
-->
</style> 
 
<script type="text/javascript">
<!-- 
var clicDivEnfant = false;
function clic_1(objet)
{
	if (!clicDivEnfant)
	{
		selectElement(objet);
	}
	clicDivEnfant = false;
}
 
function clic_2(objet)
{
	clicDivEnfant = true;
	selectElement_page(objet);
}
 
 
var current = null;
 
function selectElement_page(element){
 
				current = element ;
				var parent = element.parentNode;
				for(i=0;i<parent.childNodes.length;i++){
 
					var newclass = 'tests'+i;
 
				parent.childNodes[i].className= 'sous_container';
 
			}
				element.className = 'sous_container_on';
 
			}
 
 
			function selectElement(element){
        current = element ;
				var parent = element.parentNode;
				var j =1;
				for(i=0;i<parent.childNodes.length;i++){
 
 
 
				parent.childNodes[i].className= 'container1';
 
			}
			element.className = 'container';
 
			}
 
//-->
</script>
 
</head>
 
 
<body>
 
<div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 3</div>
 
</div>
<div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 3</div>
 
</div>
 
 <div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 3</div>
 
</div>
 
 
 
</body>
</html>

15/04/2009, 17h12
legide

il y a t-il quelqu'un sur ce forum qui peux m' aider à résoudre ce problème?

Citation:

Envoyé par legide

il y a t-il quelqu'un sur ce forum qui peux m' aider à résoudre ce problème?

Patience, patience ! :roll:
Nous sommes tous des bénévoles, nous avons d'autres activités donc on ne peut pas répondre tout de suite à toutes les demandes. Il n'y a que 5 heures d'écart entre tes deux messages, pas une semaine....
Et puis rien ne t'empêche de cogiter de ton côté...

Pourquoi passes-tu par chlidNode ?

J'aurais fait :

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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
 
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
.container{
        width: 200px;
        heigth: 200px;
        border: 1px solid #A3D413;
        margin-bottom:10px;
}
.container1{
        width: 200px;
        heigth: 200px;
        border: 1px solid #000000;
        margin-bottom:10px;
}
.container2{
        width: 200px;
        heigth: 200px;
        border: 1px solid #000000;
        margin-bottom:10px;
}
.container3{
        width: 200px;
        heigth: 200px;
        border: 1px solid #000000;
}
 
 
.sous_container{
        margin: 20px;
        border: 1px solid #FF0000;
        margin-bottom:10px;
}
.sous_container_on{
        margin: 20px;
        border: 1px solid #A3D413;
        margin-bottom:10px;
}
-->
</style> 
 
<script type="text/javascript">
<!-- 
var clicDivEnfant = false;
function clic_1(objet)
{
        if (!clicDivEnfant)
        {
                selectElement(objet);
        }
        clicDivEnfant = false;
}
 
function clic_2(objet)
{
        clicDivEnfant = true;
        selectElement_page(objet);
}
 
 
var currentChild = null;
var currentParent = null;
 
function selectElement_page(element)
{
        var i;
    var childEl;
 
        if (currentParent!=null)
        {
                childEl = currentParent.getElementsByTagName("div");
                
                currentParent.className = "container1";
                for (i=0; i<childEl.length; i++)
                        childEl[i].className = "sous_container";
        }
 
 
        if (currentChild!=null && element!=currentChild)
                currentChild.className = "sous_container";
                                
        element.className = "sous_container_on";
        currentChild = element;
}
                        
                        
function selectElement(element)
{
        var i;
    var childEl;
 
        if (currentParent!=null && currentParent!=element)
        {
                childEl = currentParent.getElementsByTagName("div");
                
                currentParent.className = "container1";
                for (i=0; i<childEl.length; i++)
                        childEl[i].className = "sous_container";
        }
        
        if (currentChild!=null)
                currentChild.className = "sous_container";
        
        childEl = element.getElementsByTagName("div");
        
        element.className = "container";
        for (i=0; i<childEl.length; i++)
                childEl[i].className = "sous_container_on";
                
        currentParent = element;
 
}
 
//-->
</script>
 
</head>
 
 
<body>
 
<div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 3</div>
 
</div>
<div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 3</div>
 
</div>
 
 <div class="container1" onclick="clic_1(this)">
 
	<div class="sous_container" onclick="clic_2(this)">sous bloc 1</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 2</div>
	<div class="sous_container" onclick="clic_2(this)">sous bloc 3</div>
 
</div>
 
 
 
</body>
</html>

et on peut encore simplifier le script ;)

16/04/2009, 12h10
legide

Merci beaucoup pour ton aide ,

god bless you