jQuery : Rendez vos lignes cliquables!

13 Tim Astuces Vendredi 11 février 2011, 11:00

Petit billet rapide pour une petite astuce jQuery, ca faisait longtemps! Le but ici est simplement de donner la possibilité de cliquer sur un élément parent d’un lien pour l’activer. Et comme j’ai un peu galéré je me suis dit que ca valait le coup de partager le code.

Que se soit dans une liste ou dans un tableau, il y a parfois qu’un seul lien, et je trouve assez pratique souvent de donner la possibilité à l’utilisateur de cliquer sur toute la ligne pour l’activer sans pour autant dégrader mon code html. Et comme je suis du genre à aimer ouvrir des liens dans un nouvel onglet, je comptais bien reproduire ce comportement.

Voici donc le code, résultat de cette réflexion, ou un clic avec ctrl (ou cmd pour les mac) ou le bouton du milieu de la souris devrait ouvrir le lien dans un nouvel onglet, comme le ferait un lien normal :

$('.line-click').live('click', function(e){
  e.stopPropagation();
  href = $(this).children('a:first').attr('href');
  if (e.ctrlKey || e.metaKey || e.which == 2) {
    window.open(href);
  } else {
    window.location = href;
  }
}).css('cursor', 'pointer');

A utiliser avec le code html suivant par exemple:

<ul>
  <li class="line-click"><img src="monimage.jpg" alt="youpi" /> 10/02/11 <a href="monlien.html">Titre de mon billet</a></li>
  <li class="line-click"><img src="monimage2.jpg" alt="youpi" /> 07/02/11 <a href="monlien2.html">Titre de mon 2e billet</a></li>
  <li class="line-click"><img src="monimage3.jpg" alt="youpi" /> 21/01/11 <a href="monlien3.html">Titre de mon 3e billet</a></li>
</ul>

A adapter selon vos envies. Ici c’est le premier lien trouvé dans l’élément avec la class line-click qui sera déclenché. Voilà, en attendant que j’arrive à finir un billet plus consistent!

Crédit photo : http://www.flickr.com/photos/flyingturtle/837938254

Tags: astuce, javascript, jquery, tips

13 Réponses

NaWer 11 février 2011 à 11 h 51 min #

Je n’ai pas réussi à reproduire l’astuce sous Chrome ni Firefox. Par contre, avec mouseup comme event, ça fonctionne (sauf que Firefox râle pour les popups mais bon)
Tim 11 février 2011 à 13 h 52 min #

Ah!

Chez moi ca marche très bien, mais j’avoue j’ai testé que sous mac pour l’instant. T’es sous windows, linux?

Ca dépend aussi peut-être de la version de jquery, j’ai souvenir que c’est assez récent comme ajout.
NaWer 11 février 2011 à 13 h 58 min #

jQuery 1.5, linux (Ubuntu) avec Chrome 9.0.597.84 et Firefox 2.5.14
Le live est récent, mais n’est pas vraiment utile ici (live est utile pour les élément inserés après)

On peut juste utiliser el.bind(‘click mouseup’,etc…
ou encore juste el.mouseup(etc…

Sans mouseup, point de salut pour le click du milieu, ni Control+click d’ailleurs (chez moi :p )
Tim 11 février 2011 à 14 h 10 min #

Oui pour le live, mais j’ai pris l’habitude de m’en servir toujours au cas où :D

je parlais surtout de « e.ctrlKey || e.metaKey || e.which == 2″ comme modification récente.

Donc ok, ca ne fonctionne pas dans linux! Si un windowsien passe dans le coin :D
Tweets that mention jQuery : Rendez vos lignes cliquables! -- Topsy.com

[...] This post was mentioned on Twitter by Yohann Monnier, Samuel Trocmé. Samuel Trocmé said: jQuery : Rendez vos lignes cliquables! http://j.mp/gDxDNU [...]
Nawer 12 février 2011 à 10 h 56 min #

Si si, ça fonctionne, mais avec mouseup :-)
idem sous Windows
Tim 16 février 2011 à 14 h 31 min #

Après quelques tests de mon côté, j’ai le même comportement avec mouseup et click sous windows.

En tout cas, windows et IE réagisse bien a « e.ctrlKey »

Le truc, c’est qu’il faut configurer son navigateur pour ouvrir les nouvelles fenêtres dans un onglet pour que ca fonctionne. J’ai zapé ce petit détail, sachant que j’ai cette option activée depuis toujours.

Sinon, ca ouvrira une nouvelle fenêtre.
Florian Klein 22 février 2011 à 16 h 41 min #

Pour info, le .live de jQuery n’est qu’un sucre syntaxique pour faire un .bind sur un des parents de ton element DOM. Ca utilise le principe d’ « Event Delegation/Bubbling », chose qui est faisable par tes propres soins en observant un des parents de l’element en question et en vérifiant que le ‘event.target’ (l’element qui a inité l’event) correspond a l’element recherché (via .hasClassName() par exemple).
Tim 24 février 2011 à 10 h 03 min #

Merci pour cette précision Florian!
jfsimon 20 mars 2011 à 19 h 08 min #

@Tim : Ton code serait plus simple comme ceci:

$(‘.line-click’).live(‘click’, function(e){
$(this).children(‘a:first’).click();
}).css(‘cursor’, ‘pointer’);

Tu simules le click sur le lien quoi.

@Florian : la méthode live est bien plus qu’un simple bind, cette méthode « auto bind » tout nouvel élément inséré dans le DOM (ce qui est très puissant !).
Tim 21 mars 2011 à 10 h 57 min #

Hello,

J’avais essayé ce genre de code, mais j’avais eu le droit à une erreur de type « too much recursion »

Après, je fais peut-être mal qqch ^^
Florian Klein 21 mars 2011 à 11 h 41 min #

@jfsimon, on pourrait croire que live « auto bind » tout nouvel element du DOM, mais ce n’est pas le cas!

Tout ce qu’elle fait, c’est binder l’element root du DOM pour etre sur de recevoir l’event d’un de ses fils.
Bref, c’est de l’event delegation ou bubbling.
Tu pourrais faire la meme chose avec .delegate ou .bind. C’est juste du sucre pas très optimisé.

L’explication ici: http://www.reflexionsweb.info/2010/04/27/jquery-live-vs-delegate/
jfsimon 21 mars 2011 à 22 h 46 min #

@Florian, effectivement tu as raison, les apparences sont trompeuses! Du coup, je suis un peu déçu par cette méthode que je pensais plus intéressante qu’elle ne l’est (sans l’avoir trop utilisée, j’avoue). Merci pour cette précision…

Laisser un message

Cliquez ici pour annuler la réponse.