Stopper un événement click

Version imprimable

Bonsoir,

je rencontre le "problème suivant" exposé ci-dessous :

- dans un fichier .html j'ai crée un bouton de type button comme le montre le code ci-dessous :

Code:

1
2
3
4
5
6
 
 <body>
        <div id="bouton">
            <input type="button" name="bouton" value="Notation" />
        </div>
    </body>

- Dans un fichier javascript attaché, je souhaiterais afficher suite à un évènement 'click' une liste déroulante permettant de choisir des notes de musique ce que j'ai réussi à faire avec le code suivant :

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
 
(function(){
    var exemple = {
        init : function(){
            window.addEventListener('load',function(event){
               var bouton = document.getElementById('bouton');
                bouton.addEventListener('click',function(event){
 
                // création des éléments du formulaire généré après le 'click' sur le bouton NOTATION
                var form = document.createElement('form');
                form.action='devoir_2_demande_2.php';
                form.id='formulaire';
                form.method='POST';
                var select = document.createElement('select');
                select.id = 'choice';
                select.name='note_classique';
                form.appendChild(select);
                document.body.appendChild(form);
 
                // Génération du tableau de corrspondance des notes de musique
 
                var notes = [['Faites votre choix', 'Do', 'Ré', 'Mi', 'Fa', 'Sol', 'La', 'Si'], ['', 'C', 'D', 'E', 'F', 'G', 'A', 'B']];
 
                notes[0].forEach(function(valeur,index){
                   var option = new Option(valeur,index);
                select.appendChild(option);
                });
                });
            });
        }
    };
    exemple.init();
})();

Je souhaiterais savoir comment empêcher l'apparition d'une nouvelle liste déroulante chaque fois que l'on clique sur le bouton notation. Ou, dit autrement, comment faire pour générer une seule fois la liste déroulante contenant les notes de musique en JAVASCRIPT ?

Je vous remercie par avance à l'attention que vous porterez à ma demande qui doit vous semblez "basique".

Bonne soirée et merci d'avance !

14/10/2014, 22h05
NoSmoking

Bonjour,
change d'approche, fait que ton bouton affiche la liste, fait voir via un display:block par exemple.

Je ne vois pas trop l’intérêt que de créer dynamiquement un objet qui ne l'est pas, si ce n'est l'exercice de style.

Sinon tu peux utiliser la méthode removeEventListener pour supprimer le listener ajouté.

Merci pour cette réponse. Plusieurs points à préciser... C'est un exercice proposé et j'ai une démarche à suivre ce qui explique que la voie suivie peut paraître étrange. De plus je n'ai pas compris la réponse faisant intervenir display:block.

Par contre quand j'essaie d'utiliser removeEventListener ca ne fonctionne plus :

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
 
(function(){
    var exemple = {
        init : function(){
            window.addEventListener('load',function(event){
               var bouton = document.getElementById('bouton');
                var listener = function(event){
                document.createElement('form');
                form.action='devoir_2_demande_2.php';
                form.id='formulaire';
                form.method='POST';
                var select = document.createElement('select');
                select.id = 'choice';
                select.name='note_classique';
                form.appendChild(select);
                document.body.appendChild(form);
                };
                if(!form){
                 bouton.addEventListener('click', listener);   
                }
                else{
                    bouton.removeEventListener('click', listener);
                }
                });
                // Génération du tableau de correspondance des notes de musique
 
                var notes = [['Faites votre choix', 'Do', 'Ré', 'Mi', 'Fa', 'Sol', 'La', 'Si'], ['', 'C', 'D', 'E', 'F', 'G', 'A', 'B']];
 
                notes[0].forEach(function(valeur,index){
                   var option = new Option(valeur,index);
                select.appendChild(option);
                });
                });
            });
        }
    };
    exemple.init();
})();

Est-ce correct .??

Merci encore

14/10/2014, 22h43
Golgotha

Pour donner une réponse simple, tu peux conditionner la création de la liste avec l’existante de ladite liste.

if (!document.getElementById('formulaire')) { ... }

http://jsfiddle.net/owqbcyoo/
14/10/2014, 22h46
beckhton

C'est toi le meilleur !!!

MERCI ENCORE du temps passé sur ce cas !

La gestion par test d’existence n'est pas franchement la méthode que je préfère, dans un cas comme celui ci, autant détruire l'événement dont on n'a plus besoin que de rentrer dans le gestionnaire et d'en ressortir sans rien avoir fait.
Code:

1 2 3 4 5 6 7 8 bouton.addEventListener('click',function(event){ // création des éléments du formulaire généré après le 'click' sur le bouton NOTATION // Génération du tableau de corrspondance des notes de musique //-- Supprime le listener --// this.removeEventListener(event.type, arguments.callee); });
Certaines bibliothèques mettent ne place un mono événement, one (jQuery) pour ne cité que celui ci.

Une méthode un peu plus radical serait de supprimer purement et simplement le BUTTON.