Héritage d'évènement javascript
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:
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:
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.
