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.

**NoSmoking** · 01/10/2022, 08h58

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

Je crois avant tout qu'il faut que tu essaies de comprendre ce que tu écris/copies/intégres comme code car là ...

Je te propose de simplement essayer avec ce code entre les balises <script></script> à la place de ce qui s'y trouve.

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
/**
 * function qui définie ce que l'on va faire au clic sur un élément
 */
function fonctionSurClic(e) {
  const elClicked = e.target;
  // ce que tu veux faire lors du clic sera à mettre ici 
  // exemple :
  const coord = elClicked.getAttribute("coords");
  alert(coord);
}
// autre façon, plus concise, pour récupérer les éléments
const elementsArea = document.querySelectorAll("#zones_image area");
/**
 * pour toutes les area 
 * affectation événement au clic, mais une seule fois avec ({once: true})
 */
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic, {
    once: true
  });
});;

**bahh66** · 01/10/2022, 10h27

Je crois avant tout qu'il faut que tu essaies de comprendre ce que tu écris/copies/intégres comme code car là ...

Je te promets, j'essaie, mais mes cours de code datent d'il y a 25 ans en java donc il me faut beaucoup d'efforts pour essayer de comprendre.

J'ai essayé quelque chose qui me semble convenir mais je préfère avoir un avis extérieur avant de clôturer le sujet.

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
   function fonctionSurClic(e) {
        const elClicked = e.target;
            // ce que tu veux faire lors du clic sera à mettre ici 
            // exemple :
        const coord = elClicked.setAttribute("coords","0,0,0,0");
        //alert(coord);
    }
 
const elementsArea = document.querySelectorAll("#zones_image area");
/**
 * pour toutes les area 
 * affectation événement au clic, mais une seule fois avec ({once: true})
 */
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic, {
    once: true
  });
});;

Comme je ne veux plus que le joueur puisse cliquer à nouveau dans une area, je me suis dit que j'allais réduire la map à 0.

Est-ce acceptable ou est-ce tiré pa les cheveux?

**bahh66** · 02/10/2022, 13h52

Ah ben non ca ne fonctionne pas, j'ai fait plus de tests et la map disparait après une utilisation peut importe qu'elle soit juste ou non.
Du coup, il faut que je réfléchisse à une réponse qui ne fonctionne que si la réponse est juste.

**NoSmoking** · 03/10/2022, 10h09

Du coup, il faut que je réfléchisse à une réponse qui ne fonctionne que si la réponse est juste.

en règle générale c'est ce que l'on fait avant tout codage, définir « correctement » son besoin

Dans ton cas donc ce n'est pas un clic unique qui t’intéresse mais supprimer l'action au clic si la réponse est bonne.

Encore une fois il existe plusieurs solutions

suppression de l'écouteur grâce à la méthode Element.removeEventListener()
↪ Element.removeEventListener()
suppression de l'élément par lui même grâce à la méthode Element.remove()
↪ Element.remove()
suppression de l'attribut coord grâce à la méthode Element.removeAttribute(), ou mise à zéro comme tu l'as entrevu

↪ Element.removeAttribute()
...

Dans la fonction il te faut prendre cela en compte dans la partie

Code :

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

1
2
3
4
5
6
// la réponse est juste
if (result === area["dataset"]["nom"]) {
  compt += 10;
  document.getElementById("champDuPrompt").innerHTML = compt;
  // supprimer l'écouteur, l'élément, les cooronnées ...
}

Nota : dans ce cas et sur l'ajout via addEventListener il te faut donc supprimer l'option {once: true}.

Code :

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

1
2
3
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic);
});

**bahh66** · 03/10/2022, 12h40

définir « correctement » son besoin

Je pensais l'avoir fait mais je me rends compte que non en fait

Pour ce qui est des différentes solutions que tu me proposes.
Je souhaite qu'une bonne réponse dans le prompt entraine une suppression de l'écoute du click dans la zone répondu juste.

Donc il me semble qu'il faudrait faire

Code :

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

area.removeEventListener("click", evenement_clic);

vu qu'on lui demande plus haut

Code :

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

 forEach(area=> area.addEventListener("click",evenement_click =>...

mais ca ne fonctionne pas, ai-je mal définit ma fonction? Au mauvais endroit?

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
<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"
  // supprimer l'écouteur, l'élément, les cooronnées ...
    function fonctionSurClic(e) {
 
        area.removeEventListener("click", evenement_clic);
    }
 
			}
            else {
                 }
		}
	);
 
 
});
 
 
const elementsArea = document.querySelectorAll("#zones_image area");
/**
 * pour toutes les area 
 */
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic);
});;
</script>

**NoSmoking** · 03/10/2022, 14h51

Reprenons tranquillement !

En premier on va définir ce que l'on veut faire au clic sur un élément <area>, c'est la fonction fonctionSurClic qui va s'en charger.

• Tout d'abord tes variables globales utilisées :

Code :

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

1
2
let compt = 0;
let vie = 3;

• Ensuite la « fameuse » fonction :

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
/**
 * function qui définie ce que l'on va faire au click sur un élément <area>
 */
function fonctionSurClic(e) {
  // récup. élément cliqué
  const elClicked = e.target;
  // demande faite à utilisateur
  const result = prompt("Entre le nom du jeu :" + elClicked["dataset"]["nom"], "");
  // traitement cas où appui sur annuler
  if (null === result) return;
  // test réponse
  // si réponse OK, il faudrait faire peut-être plus de contrôle
  // comme minuscule/MAJUSCULE, enlever les espaces début et fin ...
  if (result === elClicked["dataset"]["nom"]) {
    compt += 10;
    document.getElementById("champDuPrompt").innerHTML = compt;
    // (1) suppression de l'écouteur
    elClicked.removeEventListener("click", fonctionSurClic);  // fonctionSurClic est le nom de la fonction appelée
    // (2) suppression de l'élément
    // elClicked.remove();
    // (3) suppression de l'attribut coords
    // eClicked.removeAttribute("coords");
  }
  // réponse nOK
  else {
    let msg;
    vie -= 1;
    // mise à jour affichage nbr vies
    setNbrVies(vie);
    document.getElementById("nbdevies").innerHTML = vie;
    // traitement résultat
    if (vie == 0) {
      msg = "GAME OVER";
    }
    else {
      msg = "Il ne vous reste plus que " + vie + " vies";
    }
    // diffère l'affichage de la boîte alert
    setTimeout(() => alert(msg), 100);
  }
}

... je pense qu'elle est suffisamment commentée

• Puis affectation de cette fonction au clic, c'est tout simple :

Code :

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

1
2
3
4
5
6
7
8
/**
 * pour toutes les <area>
 * affectation événement au click
 */
const elementsArea = document.querySelectorAll("#zones_image area");
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic);
});

• Et pour finir, ce que l'on a déjà vu, le reste des fonctions/initialisations :

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
//// et pour fini ////////////////////////////////////////////
const elemHeart = document.querySelectorAll(".svg-heart use");
 
function setNbrVies(nbr) {
  elemHeart.forEach((svg, ind) => {
    svg.classList.remove("fill-heart");
    if (ind < nbr) {
      svg.classList.add("fill-heart");
    }
  });
}
// initialisation des coeurs pleins
setNbrVies(vie);
document.getElementById("nbdevies").innerHTML = vie;
document.getElementById("champDuPrompt").innerHTML = compt;

Voilà tu as tout ce qu'il te faut pour que cela fonctionne, il te suffit de reprendre ces codes les uns après les autres et de les mettre entre les balises <script></script> !

**bahh66** · 03/10/2022, 18h45

MERCI.

Tout d'abord, j'ai su copier/coller.

et bien évidemment ça fonctionne.

Ensuite, j'ai des questions pourquoi on a remplacé

Code :

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

1
2
3
4
5
6
7
8
9
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"];

par la fonction? depuis le début j'essaie de combiner les deux alors que tu as remplacé , il me semble, par

Code :

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

1
2
3
4
const elementsArea = document.querySelectorAll("#zones_image area");
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic);
});

Tu as aussi noté dans le code

// si réponse OK, il faudrait faire peut-être plus de contrôle
// comme minuscule/MAJUSCULE, enlever les espaces début et fin ...

et en effet, je pense qu'il va falloir réfléchir à une gestion de la casse, mais peut-être aussi d'erreurs orthographiques?
Je pense aussi rajouté une alerte qui renvoie la réponse rentrée si elle est juste.

J'attends juste une réponse à ces questions si tu le peux et je mettrai le sujet en résolu.

**bahh66** · 03/10/2022, 22h05

Je viens de me rendre compte que du coup ca affiche la réponse dans le prompt, du coup plus besoin de réfléchir à la réponse à mettre.

J'ai donc modifié comme ça

Code :

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

 const result = prompt("Entre le nom du jeu :" , "");

On dirait que ça fonctionne. J'espère ne pas avoir enlever un élément important.

**NoSmoking** · 04/10/2022, 14h33

Je viens de me rendre compte que du coup ca affiche la réponse dans le prompt, du coup plus besoin de réfléchir à la réponse à mettre.

ah oui

j'ai oublié de te dire que j'avais ajouté l'info pour que tu sois sûr de la zone cliquée, ta correction est correcte !

Ensuite, j'ai des questions pourquoi on a remplacés ...

Tout d'abord il est utile de préciser que chaque intervenants à ses propres habitudes de codage et qu'il y a rarement qu'une seule façon de faire ce qui explique les différentes écritures proposées pour un même problème par les intervenants.

Il est également souvent délicat d'appréhender le niveau du demandeur pour que la réponse ne soit pas trop nébuleuse

• point #1

Les deux codes ont des écritures différentes mais font la « presque » la même chose.
code #1

Code :

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

1
2
3
4
5
let balises_area = Array.from(
  document
    .getElementById("zones_image")
    .getElementsByTagName("area")
);

... dans ce cas on récupère un Element, getElementById pour lequel on récupère une HTMLCollection, getElementsByTagName et le résultat obtenu est converti en tableau, Array.from, on peut donc utiliser la méthode forEach() pour boucler sur ces éléments

code #2

Code :

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

const elementsArea = document.querySelectorAll("#zones_image area");

... dans ce cas on récupère directement une NodeList, en utilsant un sélecteur CSS, sur laquelle on peut directement itérer en utilisant forEach().

Ma préférence va à cette seconde écriture plus concise. Elle est supportée par les navigateurs récents, donc non IE (rip), depuis pas mal de temps.

Il faut cependant noter que les résultats retournés ne sont pas exactement les mêmes d'où le « presque » !!!

• getElementById	: renvoie un Element	https://developer.mozilla.org/fr/docs/Web/API/Element
• getElementsByTagName	: renvoie une HTMLCollection	https://developer.mozilla.org/fr/doc...HTMLCollection
• getElementsByClassName	: renvoie une HTMLCollection	https://developer.mozilla.org/fr/doc...HTMLCollection
• querySelector	: renvoie un Element	https://developer.mozilla.org/fr/docs/Web/API/Element
• querySelectorAll	: renvoie une NodeList	https://developer.mozilla.org/fr/docs/Web/API/NodeList

Je ne rentrerais pas plus dans le détail, dans certains cas certaines méthodes peuvent être préférable à d'autres.

• point #2

on rejoint le point approché au post #3 et concernant la mémoire
code #1

Code :

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

1
2
3
4
5
6
7
elementsArea.forEach((area) => {
  area.addEventListener("click", (e) => {
    // récup. élément cliqué
    const elClicked = e.target;
    // la suite du code plus ou moins complexe
  };
});

code #2

Code :

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

1
2
3
4
5
6
7
8
9
10
// définition une seule fois de la fonction
function fonctionSurClic(e) {
    // récup. élément cliqué
    const elClicked = e.target;
    // la suite du code plus ou moins complexe
  };
});
elementsArea.forEach((area) => {
  area.addEventListener("click", fonctionSurClic);     // bien noter la façon de passer la référence de la fonction
});

Imaginons que tu aies 100 éléments auxquels il faille ajouter un comportement au clic.

• Dans le code #1 lors de l'affectation tu vas dupliquer 100 fois la même fonction, une fois pour chaque élément.

• Dans le code #2 tu définis une seule fois la fonction et elle servira pour tes 100 éléments, ce sera la même qui sera appelée, passage en paramètre par référence sans les parenthèses, d’où le gain en mémoire.

On utilise l'une ou l'autre mais effectivement pas les deux

Nota : on pourrait également passer par de la délégation mais ceci est une autre histoire et pour ne pas t'embrouiller on verra peut-être cela à une autre occasion.

Voilà j’espère avoir répondu à ton attente.
...

**bahh66** · 04/10/2022, 20h07

Merci et je continue mes questions sur un autre post.

Affecter un événement une seule fois

JavaScript

Discussions similaires

Partager

Partager