Clic sur balise "li" à plusieurs niveaux

Version imprimable

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

03/03/2011, 17h41
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"); } );
04/03/2011, 00h59
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

Salut,

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

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	<!-- 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>

04/03/2011, 08h29
Bovino

Citation:

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 ;)
04/03/2011, 09h13
filou2931
Citation:
Envoyé par 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
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.

Citation:

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à...

Citation:

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é.
04/03/2011, 09h21
Bovino

Citation:

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é.

:roll:

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

Citation:

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...
04/03/2011, 09h33
filou2931

Citation:

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