Comportement inattendu gestionnaire "addEventListener" sur event "click" avec this.id

**ManuZaz** · 10/11/2018, 18h33

Bonjour à tous,
D'abord, j’ai très peu d’expérience en JS (la théorie seulement). En fait, j’essaie de faire ma première page dynamique en JS.

Mon objectif est de déplier (développer) un élément du DOM en sous éléments (children) lorsque je click sur cet élément parent.
- Si je click une premiere fois sur l'élément parent "niveau1", je le développe en affichant un children "niveau2"que je créé dynamiquement en JS.
- Si je click sur l'élément parent une seconde fois alors qu'il est déjà déplier/développé, alors je supprime les children (je referme le dépliage). Cette partie là est commentée dans mon code pour le moment)
- Ma fonction "developpe" est également en mesure de développer un children en sous-children ("niveau3", je me suis arrêté là pour l’instant.

J’utilise la méthode "addEventListener" sur l’élément et je passe 2 parametres :
- "click"
- ma fonction "developpe" avec "this.id"

Le dépliage du "niveau1" se passe correctement. En revanche au dépliage du "niveau2", je constate deux appels à ma fonction "developpe" :
- un premier avec un "this.id" qui vaut "niveau2" (donc je déplie le "niveau2" en affichant "niveau3" tout va bien).
- un second qui vient dans la foulée avec un "this.id" qui vaut "niveau1" et que je n’attends pas puisque je n’ai pas cliqué sur "niveau1"

C’est en positionnant un console.log() dans ma fonction "developpe" que j’ai vu ce qu’il se passait.

Nom : trace.png
Affichages : 303
Taille : 135,1 Ko

Nom : trace.png
Affichages : 303
Taille : 135,1 Ko

Je pense que j’ai mal interprété quelque chose et que je n’emploie pas le gestionnaire d’évènements "addEventListener" dans les règles.
Mais là je suis sec, je ne vois pas comment m’en sortir. J’ai fourni le code en pièce jointe. Pouvez-vous jeter un œil et me donner un piste pour avancer.

Merci à tous

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
 
<!DOCTYPE html>
<html>
    <head>
        <!-- En-tête de la page -->
        <meta charset="utf-8" />
        <title>Titre</title>
 
    </head>
 
 
    <body>
        <h1 id="titre">Titre</h1>
        <div>
            <script src="./developper.js"></script>            
        </div>
 
    </body>
</html>

Code javascript :

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
 
function developpe(valId) {
    var elt = document.getElementById(valId);
    var eltChildLength = elt.childNodes.length;
 
    switch (valId)
    {
        case "niveau1":
            var list=["niveau2"];
            break;
        case "niveau2": 
            var list=["niveau3"];
            break;
    }
    console.log('click sur ' + valId);
    console.log('demande un developpement du niveau "' + valId + '", donc affichage de "' + list[0] + '" sur la page web');
    // Si le niveau selectionne n'a pas d'enfants alors il faut déplier en créant des enfants 
    if (eltChildLength <= 1) {
 
        listLength = list.length;
        for (var i = 0; i < listLength; i++) {
            var subElt = document.createElement("h1"); // Création d'un sous élément de balise "h1"
            subElt.id = list[i]; // Définition de son identifiant
            subElt.setAttribute("onmouseover", 'this.style.cursor=\'pointer\';');
            subElt.style.fontSize = "14px";
            subElt.addEventListener("click", function () { developpe(this.id); } );
            subElt.innerHTML = list[i];
            elt.appendChild(subElt); // Insertion du nouveau sous-élément
        }
 
        // Si le niveau selectionnee a des enfants alors on supprime les enfants pour replier le niveau
        } else {
            var children = elt.childNodes;
            //for ( var i = eltChildLength - 1; i >= 1; i-- ) {
            //  elt.removeChild(children[i]);
            //}
 
        }
 
 
}
 
// Main: Affichage de la page d'accueil "niveau1"
var elt = document.createElement("h1"); // Création d'un élément de balise "h1"
elt.id = "niveau1"; // Définition de son identifiant
elt.setAttribute("onmouseover", 'this.style.cursor=\'pointer\';');
elt.innerHTML = "niveau1";
elt.style.fontSize = "14px";
elt.addEventListener("click", function () { developpe(this.id); } );
document.getElementById("titre").appendChild(elt);

Invité · 10/11/2018, 19h00

Bonjour,

Event.stopPropagation()

**ManuZaz** · 10/11/2018, 23h03

Merci pour le coup de main jreaux62, je vais creuser cette piste.

**Beginner.** · 10/11/2018, 23h09

Salut,

C'est un exercice ou bien tu veux faire un site ?

**ManuZaz** · 11/11/2018, 16h01

Bonjour Beginner,

A terme, effectivement, je veux me faire un petit site.
En résumé, je veux pouvoir interroger ma page web depuis mon tel portable et consulter différentes données que j'aurai auparavant stocker dans une base mysql.

**Beginner.** · 11/11/2018, 16h32

Salut,

1- Dans l'autre fil tu parles de "viande" est-ce juste un exemple ou bien tu comptes faire un site sur la viande ?

2- As-tu résolu ton problème ?

3- Est-ce qu'il y a beaucoup d’articles ? Parce que là je vois que tu fabriques ton menu et sous-menu dynamiquement alors que tu pourrais faire une liste avec des balises <ul> et <li> auxquelles tu ajouterais la fonctionnalité "plier/déplier". En plus c'est étrange tu utilises des balises <h1> imbriquées...

Comportement inattendu gestionnaire "addEventListener" sur event "click" avec this.id

JavaScript

Vue hybride

Discussions similaires

Partager

Partager