Clic sur balise "li" à plusieurs niveaux [Résolu]

[filou2931]

Bonjour tout le monde,

J'ai un soucis de détection de clic, ou plutôt de détection de l'élément cliqué.
Voilà le soucis :

• j'ai une liste à deux niveaux représentant un menu
• chaque balise "li" est associée à un lien : un clic sur une balise "li" doit donc charger ce lien
• pour ces liens, je ne veux pas utiliser la balise "a" (de part l'architecture du menu en particulier, rendant impossible cette utilisation pour le niveau 1)

Voici le code HTML :

Code :

1
2
3
4
5
6
7
8
9
10
 
<ul class="topnav">
    <li>Niveau 1 - Titre 1</li>
    <li>Niveau 1 - Titre 2</li>
        <ul class="subnav">
            <li>Niveau 2 - Titre 2.1</li>
            <li>Niveau 2 - Titre 2.2</li>
        </ul>
    <li>Niveau 1 - Titre 3</li>
</ul>

Afin de prendre en compte les fameux liens, j'ai rajouter un attribut "lien_href" pour chaque "li" :

Code :

1
2
 
<li lien_href=[mon_lien_ici]>[...]</li>

Puis ensuite, en javascript, j'applique le lien lorsqu'un clic est détecté sur un "li" :

Code :

1
2
3
4
5
6
 
$("li").click(
    function(){
        window.location.href = $(this).attr("lien_href");
    }
);

Ce code fonctionne parfaitement lorsque je clique sur un "li" de Niveau 1.
Le soucis vient du fait que lorsque je clique sur un "li" de niveau 2, le lien pris en compte est celui du "li" parent... En fait à ce que je comprend deux clics sont détectés : un premier sur le "li" effectivement cliqué (celui de niveau 2), et un second sur le "li" parent (non cliqué, mais comme on clique sur un de ses fils...?).
J'ai bien tenté d'utiliser la méthode "stopPropagation" ou encore "cancelBubble" mais rien n'y fait, c'est toujours le lien de niveau 1 qui est pris en compte...
En fait dans ma fonction javascript il faudrait que je puisse savoir si l'élément $(this) est bien l'élément cliqué, mais comment ? En comparant avec la position du pointeur ? Pas très propre à mon goût et fastidieux...

Voilà j'espère avoir été assez clair pour que quelqu'un puisse m'orienter vers une solution efficace.
Dans l'attente, merci d'avance !

Philippe

[filou2931]

Ok trouvé, il s'agissait bien d'utiliser stopPropagation... Mais je l'utilisais mal.
Pour ceux qui serait dans la même problématique que moi, voici comment faire :

Code :

1
2
3
4
5
6
7
 
$("li").click(
    function(event){
        event.stopPropagation();
        window.location.href = $(this).attr("lien_href");
    }
);

[dukej]

Je ne comprends pour pourquoi tu passes par un systeme d'attibut super sale :

Code :

1
2
 
<li attr_href="http://majoliepage">dfldkfdlk</li>

Et ensuite tu t'embêtes avec un JS
alors que tu peux simplement mettre un lien dans le LI

[Eric2a]

Salut,

Et la balise <ul> ne peut contenir que des éléments de liste <li>.

Code html :

1
2
3
4
5
6
7
8
9
10
<ul class="topnav">
	<li>Niveau 1 - Titre 1</li>
	<li>Niveau 1 - Titre 2	<!-- Ne pas fermer ici -->
		<ul class="subnav">
			<li>Niveau 2 - Titre 2.1</li>
			<li>Niveau 2 - Titre 2.2</li>
		</ul>
	</li>			<!-- Mais ici -->
	<li>Niveau 1 - Titre 3</li>
</ul>

[Bovino]

Envoyé par Eric2a

Et la balise <ul> ne peut contenir que des éléments de liste <li>.

Et c'est pour ça que le clic sur un li de niveau 2, l'événement est détecté par deux li car le navigateur essaye de corriger les erreurs du développeur

[filou2931]

Envoyé par dukej

Je ne comprends pour pourquoi tu passes par un systeme d'attibut super sale :

Code :

Et ensuite tu t'embêtes avec un JS
alors que tu peux simplement mettre un lien dans le LI

Et comment mettre un lien dans un "li" sans utiliser la balise "a" ? Je rappelle que c'était un de mes soucis... Définir un attribut "lien_href" dans le "li" est la seule solution simple que j'ai trouvée et qui fonctionne.

Envoyé par Eric2a

Et la balise <ul> ne peut contenir que des éléments de liste <li>.

Autant pour moi, j'avais mal recopié mon code, le soucis ne venait donc pas de là...

Envoyé par Bovino

Et c'est pour ça que le clic sur un li de niveau 2, l'événement est détecté par deux li car le navigateur essaye de corriger les erreurs du développeur

Rien à voir, l'évènement était détecté par deux "li" car la propagation était effective, il suffisait de rajouter un stopPropagation sur l'event concerné et le tour est joué, en deux lignes le lien est assuré.

[Bovino]

Envoyé par filou2931

Rien à voir, l'évènement était détecté par deux "li" car la propagation était effective, il suffisait de rajouter un stopPropagation sur l'event concerné et le tour est joué, en deux lignes le lien est assuré.

La propagation fait que l'événement était détecté par le li de niveau 2 ET par le li de niveau 1, donc

l'événement est détecté par deux li car le navigateur essaye de corriger les erreurs du développeur

est bien la cause de ton souci...

[filou2931]

l'événement est détecté par deux li car le navigateur essaye de corriger les erreurs du développeur

Pour être clair : ok le soucis étant qu'en cliquant sur un "li" de niveau 2 il y avait 2 clics de détectés : celui de niveau 2 et celui de niveau 1 dans lequel il est inclus...
Par contre, comme je l'ai dit dans mon message précédent, il n'y avait pas d'erreur dans mon code, je l'avais juste mal recopié sur ce forum...

Le fait que 2 clics soient détectés ne venait donc pas d'une "erreur de développeur" mais de la non utilisation de stopPropagation sur l'event click.

Bonne fin de journée