Discussion :

[V1ce37]

Bonsoir,

Je suis confronter à un problème d'héritage d'évènement, dans un contexte de menu de navigation, ci-dessous un exemple simple, mon problème est un peu plus compliqué car plus d'élément héritant du parent dans mon vrai code.

html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div class = "onglets">
    Onglet1
    <div class="ContenuOnglet">
        <li>
            Theme1
            <div class = "sousMenu">
                <a>Sous-theme 1</a>
            </div>
        </li>
    </div>
</div>

js :

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
onglets = document.querySelectorAll('.onglets'),
themes = document.querySelectorAll('.contenuOnglet'),
sousThemes = document.querySelectorAll('.sousMenu');
function menuMini(){
    alert("toto")
}
function menuTheme(e){
    e.stopPropagation();
    alert("tutu")
}
//Voici la fonction que j'aimerais éviter d'utiliser.
function menuSousThemes(e){
    e.stopPropagation();
}
for (var i = 0; i < onglets.length; i++) {
    onglets[i].addEventListener('click', menuMini,false);
}
for (var i = 0; i < themes.length; i++) {
    themes[i].addEventListener('click', menuTheme,false);
}
for (var i = 0; i < sousThemes.length; i++){
    sousThemes[i].addEventListener('click', menuSousThemes,false);
}

Comme on le voit ici pour les sous-thèmes je suis obliger de créer un évènement clique juste pour qu'il n'hérite pas des évènements des parents, mais c'est inimaginable de faire cela pour toute mes div, mes liens etc... présents dans le menu de navigation, Je suis sûr qu'il existe une solution plus efficace mais je n'arrive pas à m'en sortir...

Merci pour votre aide.

[Bovino]

A mon sens, tu ferais mieux d'utiliser un seul gestionnaire pour les éléments .onglets puis utiliser e.target (ou e.srcElement pour les anciennes versions de IE) pour déterminer quel élément à effectivement reçu l'événement et effectuer les traitements adaptés (ou appeler les fonctions adaptées) par rapport à cet élément.

[V1ce37]

Merci pour ta réponse je vais chercher mais pour l'instant j'ai du mal à voir comment utiliser un seul gestionnaire pour plusieurs élement.

[Golgotha]

Bonjour.

Sur la base de l'idée de Bovino, ça pourrait donner ça :

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="onglets">Onglet1    <div class="ContenuOnglet">
        <li class="themeOnglet">Theme1
            <div class="sousMenu"> <a>Sous-theme 1</a>
 
 
            </div>
        </li>
    </div>
</div>

Code js :

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
onglets = document.querySelectorAll('.onglets');
 
function menuMini(e) {
    switch (e.target.className.split(" ")[0]) {
 
 
        case 'onglets':
            console.log("onglet"); break;
        case 'themeOnglet':
            console.log("themeOnglet"); break;
 
 
    }
}
 
 
 
 
for (var i = 0; i < onglets.length; i++) {
    onglets[i].addEventListener('click', menuMini, false);
}

[Bovino]

On peut même envisager, en présageant que des onglets ont probablement un conteneur unique commun, de n'utiliser qu'un seul gestionnaire sur ce conteneur unique et de gérer tous les cas.

[V1ce37]

Quel bonheur, c'est plus clair, plus propre, parfait, une bonne chose d'apprise aujourd'hui !

Merci beaucoup pour votre aide je vois les choses différement maintenant.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
navBar = document.querySelector('nav');
function navigation(event){
        e =  event.target || event.srcElement
	targetClass = e.className.split(" ");
	for(var i = 0;i < targetClass.length;i++){
		switch (targetClass[i]) {
			case "OngletNav":
				menuMiniTest(e);break;
			case "ThemeMenu":
				menuThemeTest(e);break;
		}
	}
}
navBar.addEventListener('click', navigation,false);

Tout simplement...