IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Stopper un événement click


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    113
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 113
    Points : 52
    Points
    52
    Par défaut Stopper un événement click
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
     
    (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 !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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é.

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    113
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 113
    Points : 52
    Points
    52
    Par défaut
    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 : 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
     
    (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

  4. #4
    Membre expert
    Avatar de Golgotha
    Homme Profil pro
    Full-stack Web Developer
    Inscrit en
    Août 2007
    Messages
    1 385
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Full-stack Web Developer
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2007
    Messages : 1 385
    Points : 3 527
    Points
    3 527
    Billets dans le blog
    1
    Par défaut
    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/
    Consultant et développeur full-stack spécialiste du Web
    faq jQuery - règles du forum - faqs web

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    113
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 113
    Points : 52
    Points
    52
    Par défaut
    C'est toi le meilleur !!!


    MERCI ENCORE du temps passé sur ce cas !

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [VBA] ToggleButton événement click
    Par JOHN14 dans le forum Excel
    Réponses: 3
    Dernier message: 25/06/2007, 21h47
  2. Réponses: 6
    Dernier message: 26/02/2007, 16h33
  3. gérer l'évènement Click du contrôle Image
    Par naruto01 dans le forum VB 6 et antérieur
    Réponses: 7
    Dernier message: 30/01/2007, 19h43
  4. Problème d'évènement click sur mon onglets
    Par bitou11 dans le forum Access
    Réponses: 7
    Dernier message: 03/08/2006, 00h24
  5. événement Click sur Check et option button ??
    Par badsepuku dans le forum IHM
    Réponses: 3
    Dernier message: 09/02/2006, 13h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo