Evénements en cascade qui se répètent

**gitney** · 23/10/2014, 19h53

Salut à tous,

Je désire lors d'un clic sur une div, créer un span. Une fois ce span créé je désire créer un input lorsque je clique sur le span. Puis supprimer cette input si je re-clic sur ce même span.

Malheureusement, pour une raison qui m'échappe, lorsque je clique sur le span, l'écouteur d'évènement est répété 2 fois ce qui invalide ma condition et le résultat est donc que l'input est d'abord créé puis supprimer dans le même event.

Voici mon code:

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
function create_or_delete_input(xx){
	for(var e = 0; e < xx.length; e++){
		xx[e].addEventListener('click',function(){
			if(this.className.indexOf('cochee') == -1){
				this.className += ' cochee';									  
				var input = document.createElement('input');
				this.appendChild(input);						  						   
			}
			if(this.className.indexOf('cochee') != -1){
				this.className = this.className.replace(' cochee','');
				this.removeChild(this.lastChild);					  
			}	
		},false);		
	}
}
function create_span(x){
	for(var ee = 0; ee < x.length; ee++){
		x[ee].addEventListener('click',function(){
			var span = document.createElement('span');
			span.innerHTML = 'azerazer'
			document.body.appendChild(span);
			create_or_delete_input(document.getElementsByTagName('span'))
		},false);
	}
}
create_span(document.getElementsByTagName('div'));

Est-ce que quelqu'un aurait une idée ?

**NoSmoking** · 23/10/2014, 20h34

Bonjour,
visiblement tu as un problème de propagation d'événement, il te faut regarder du coté de stopPropagation.
En gros quand tu cliques sur la DIV tu crées un SPAN mais quand tu cliques sur le SPAN la DIV reçoit également l'événement.

Teste ceci

Code html :

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

1
2
3
4
5
<div onclick="alert('DIV cliquée!');">
  <span onclick="alert('SPAN cliqué!');">
    Texte du SPAN
  </span>
</div>

**Bovino** · 24/10/2014, 08h15

Non, c'est surtout que tu t'emmêles les pinceaux dans ta logique !

Ta portion de code commentée :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
xx[e].addEventListener('click',function(){
	if(this.className.indexOf('cochee') == -1){ // L'élément ne possède pas la classe : OK, on rentre dans la condition
		this.className += ' cochee';  // Maintenant, l'élément possède la classe "cochee" !
		var input = document.createElement('input');
		this.appendChild(input);  // Tu insères l'input
	}
	if(this.className.indexOf('cochee') != -1){  // Comme tu as ajouté la classe dans la condition précédente, cette condition est maintenant vraie !
		this.className = this.className.replace(' cochee',''); // Tu supprimes la classe
		this.removeChild(this.lastChild);  // Tu supprimes l'input
	}
},false);

Je pense qu'un else serait largement plus judicieux et approprié !

**gitney** · 24/10/2014, 10h56

Oups ! Oui en effet, j'ai affiché un code simplifié dans lequel j'ai essayé de reproduire le bug venant d'un code long et j'ai oublié de remettre le else.

Mais même avec le else le bug se passe si l'on crée 2 span en cliquant sur la div.

si on clique sur la span 2 aucun problème mais lorsqu'on clique sur la span 1 la function de l'event est joué 2 x donc la condition aussi.

J'ai simplifié en enlevant la condition et la remplacer par une alert('');
l'alert est joué 2 x lorsqu'on clique sur le span 1 et 1 seule fois sur le span 2.

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
 
</head>
 
<body>
<style>
span{
	border: 1px solid black;
}
div{
	border: 2px solid red;
	width:200px;
	height:100px;
}
</style>
 
 
 
<div></div>
 
 
 
 
<script>
 
function create_or_delete_input(xx){
 
		for(var e = 0; e < xx.length; e++){
 
				  xx[e].addEventListener('click',function(){
 
					 alert('r')
 
				  },false);					
		}
}
 
function create_span(x){
 
	for(var ee = 0; ee < x.length; ee++){
 
		x[ee].addEventListener('click',function(){
 
			var span = document.createElement('span');
				span.innerHTML = 'azerazer'
 
				document.body.appendChild(span);
 
			create_or_delete_input(document.getElementsByTagName('span'))
 
		},false);
	}
 
}
 
create_span(document.getElementsByTagName('div'));
 
 
</script>
</body>
</html>

@nosmoking : le span est un enfant du body et non de la div

**Bovino** · 24/10/2014, 11h04

Ben c'est ce que tu demandes :

Code :

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

create_or_delete_input(document.getElementsByTagName('span'))

à chaque création d'un span, tu appelles la fonction qui va affecter les gestionnaires d'événements avec comme paramètre tous les spans de la page.
Donc ceux auxquels tu as déjà affecté un gestionnaire vont en avoir un autre.
Pour rappel, les événements de type onclick correspondent à des propriétés d'un objet, c'est-à-dire que si tu les redéfinis, cela écrase l'existant. Mais ce n'est pas le cas avec addEventListener() qui accumule les déclarations.

**gitney** · 24/10/2014, 11h41

Merci bovino !!!

Evénements en cascade qui se répètent

JavaScript

Discussions similaires

Partager

Partager