conflit entre deux événement

**legide** · 14/04/2009, 11h51

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

Code :

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

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

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

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

1
2
 
onclick="selectElement(this)"

permet de selectionner et de deplacer les containers.
ensuite le clic sur un sous container

Code :

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

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 :

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

1
2
 
onclick="selectElement(this)"

dans le container alors l' événement

Code :

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

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 :

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

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

**Auteur** · 14/04/2009, 12h06

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.

**legide** · 14/04/2009, 16h58

merci,

ça ne marche pas chez moi.

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

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

**Auteur** · 14/04/2009, 19h16

un div dans un span

Code html :

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

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 html :

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

**legide** · 15/04/2009, 11h11

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 :

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

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 :

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

**legide** · 15/04/2009, 16h12

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

conflit entre deux événement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager