1 pièce(s) jointe(s)
Comportement inattendu gestionnaire "addEventListener" sur event "click" avec this.id
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.
Pièce jointe 426012
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:
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:
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); |
"niveau1" contenu dans une bdd mysql
Bonjour,
- Merci pour le event.stopPropgation, cela m'a bien dépanné
- J'ai bien compris pour le <nav>, <ul> et <li>, je vais faire propre dès le départ
- Le code fourni est un testcase minimal destiné à mettre en évidence le phénomène de propagation que je rencontrais et ne comprenais pas
Mon menu sera composé de différents éléments de "niveau1". Ces éléments sont extraits d'une table mysql parce que le nombre d'éléments de "niveau1" pourra varier (suppression, ajout, renommage etc...)
Quand vous dites "On peut très bien écrire le menu en HTML (DANS le code HTML), et faire apparaitre les niveaux au clic via JS.", est-ce que cela est appliquable dans le cas où les éléments de "niveau1" du menu ne sont statiques?
merci pour les exemple des code
Bonsoir jreaux62,
J'ai répondu un peu trop tôt dans le post précédent, je n'avais pas, alors, l'intégralité de votre réponse (les exemples de code n’étaient pas visibles).
Merci beaucoup de la peine que vous êtes donné pour me rédiger cet exemple.
