Affecter un événement une seule fois

**bahh66** · 28/09/2022, 14h04

Bonjour,
cette discussion fait suite à : Création d'un mini jeu vidéo

J'aimerais que le joueur ne puisse pas jouer 2 fois dans la même map area, sinon c'est trop facile de faire des points.
Et du coup comme il y aura beaucoup de map area, qu'il est une sorte de radar des map déjà trouvées.

Du coup j'imagine que dans

Code :

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

1
2
3
4
5
6
if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom"
 
				compt += 10;
				document.getElementById("champDuPrompt").innerHTML = compt;
 
			}

je vais insérer une ligne qui change l'eventlistener "Click" pour qu'il renvoie un message d'alerte si c'est déjà fait au lieu d'ouvrir le prompt

**bahh66** · 28/09/2022, 19h16

J'ai fait un essai en reprenant un code plus simple, une image, 2 maps area

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
<body>
    <map name="testmap" id="zones_image">
		<area
			shape="rect"
			coords="570,195,660,275"
			data-nom="bleu"
		/>
		<area
			shape="poly"
			coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"
			data-nom="jaune"
		/>
	</map>
 
    <img usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:250; left:50">
 
 
 
<script type="text/javascript">
    
 
let balises_area = Array.from(
        document
                .getElementById("zones_image") // identifiant de la balise "map"
                .getElementsByTagName("area")
);
 
 
balises_area.forEach(area => { // parcours de toutes les balises "area"
 
        area.addEventListener( // ajout d'un gestionnaire d'évènement à une balise
                  "click"
                , evenement_clic => {
 
                        let area = evenement_clic["target"];
 
 
                        let result = prompt("Entre le nom du jeu :", "");
 
                        if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom"
 
 
                        }
            else {
                 }
                }
        );
 
 
});
 
    
</script>
 
 
</body>

et j'ai essayé de changer l'attribut du click sur false pour que la map ne fonctionne plus.

Code :

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

document.getElementById("area["dataset"]["nom"]").setAttribute("onclick", "return false;");

Mais en fait plus rien ne fonctionne dès le début. si j'enlève cette ligne de code, les zones fonctionnent très bien.

Où me suis je planté???

**NoSmoking** · 29/09/2022, 17h23

Concernant ton soucis il existe également plusieurs solutions mais de loin la « plus mieux » et de n'écouter qu'une fois l'événement.

Pour cela tu peux passer à addEventListener l'option {once: true}.

Code :

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

1
2
3
4
5
6
7
8
function fonctionSurClic(e) {
  const elClicked = e.target;   // par exemple ou this
  // ce que tu veux faire dans ta fonction
}
 
element.addEventListener("click", fonctionSurClic, {
  once: true
});

Je te conseille de lire ceci : addEventListener : Problèmes de mémoire

**bahh66** · 30/09/2022, 08h08

Par rapport à la fonction que tu as notée, j'ai lu le lien que tu m'as envoyé mais ce que je ne comprends pas, c'est que tu écoutes le gestionnaire d'élément "click" définit plus haut dans les area. Si cet évènement passe "true" alors le gestionnaire d'élément click s'arrête? Mais du coup, est ce que ca ne va pas s'arreter pour toutes les balises area ou juste pour une seule ?

J'ai aussi essayé de l'utiliser, mais la encore je ne sais pas où la placer. Dans les balises area? après? Lorsque je la mets avant, cela empêche les balises de fonctionner.

**NoSmoking** · 30/09/2022, 17h37

Pour info : création d'une nouvelle discussion

Si cet évènement passe "true" alors le gestionnaire d'élément click s'arrête?

l'événement est attaché à chaque élément, pas de façon global, quand tu auras cliqué sur un élément son événement attaché ne sera plus écouté mais cela ne concerne que cet élément et pas les autres en attendant qu'il soit cliqué à leur tour.

J'ai aussi essayé de l'utiliser, mais la encore je ne sais pas où la placer.

là je ne comprend pas de quoi tu parles !?!

**bahh66** · 30/09/2022, 18h04

Tout d'abord, merci d'avoir créé une nouvelle discussion.

Ensuite quand j'utilise la fonction que tu as créé, elle n'enlève pas l'event "click". Je peux ouvrir une boite de dialogue à chaque fois que je clique sur la même zone

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
<body>
    <map name="testmap" id="zones_image">
		<area
			shape="rect"
			coords="570,195,660,275"
			data-nom="bleu"
		/>
		<area
			shape="poly"
			coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"
			data-nom="jaune"
		/>
	</map>
 
    <img usemap="#testmap" src="Fond.png" STYLE="position:absolute; top:250; left:50">
 
 
 
<script type="text/javascript">
    
 
let balises_area = Array.from(
        document
                .getElementById("zones_image") // identifiant de la balise "map"
                .getElementsByTagName("area")
);
 
 
    
balises_area.forEach(area => { // parcours de toutes les balises "area"
 
        area.addEventListener( // ajout d'un gestionnaire d'évènement à une balise
                  "click"
                , evenement_clic => {
 
                        let area = evenement_clic["target"];
 
 
                        let result = prompt("Entre le nom du jeu :", "");
 
                        if (result === area["dataset"]["nom"]) { // area["dataset"]["nom"] contient la valeur de la balise "data-nom"
 
 
                        }
            else {
                 }
                }
        );
 
 
});
    function fonctionSurClic(e) {
  const elClicked = e.target;   // par exemple ou this
  // ce que tu veux faire dans ta fonction
}
 
element.addEventListener("click", fonctionSurClic, {
  once: true
});
</script>
 
 
</body>

C'est pour cette raison que je pensais l'avoir mal placé dans le script.

Affecter un événement une seule fois

JavaScript

Vue hybride

Discussions similaires

Partager

Partager