Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

GESTION DES EVENEMENTS LIES A LA SOURIS EN JQUERY

La méthode jQuery dblclick()

La méthode dblclick() va nous permettre de réagir à un évènement de type « double clic ».

Cette méthode va fonctionner exactement comme la méthode click() vue au chapitre précédent.

Par exemple, si l’on souhaite cacher un paragraphe lorsqu’un utilisateur double-clique dessus, nous écrirons en jQuery :

On utilise la méthode jQuey dblclick() pour gérer l'évènement double clic

Essayer ce code

Ici, nous utilisons le mot clef this afin que seul le paragraphe effectivement double cliqué soit caché.

Faites attention si vous êtes tenté d'utiliser deux gestionnaires d’évènements click et dblclick sur un même élément : l’évènement click se déclenchera toujours en premier (puisqu’un double clic est composé de deux clics simples) et empêchera parfois le gestionnaire d’évènement dblclick d’exécuter l’action voulue.

Par exemple, si l’on demande à cacher un paragraphe lors d’un clic unique, on ne pourra pas cliquer une deuxième fois dessus puisque celui-ci aura disparu et ainsi l’évènement dblclick ne se déclenchera pas.

Les méthodes mouseenter() et mouseleave()

Les méthodes jQuery mouseenter() et mouseleave() vont nous permettre de répondre aux évènements « la souris passe sur un élément » et « la souris sort d’un élément ».

Par exemple, on va pouvoir afficher un élément lorsque la souris passe sur un autre élément et le cacher à nouveau lorsqu’elle sort de cet élément.

Utilisation des méthodes jQuery mouseenter() et mouseleave() pour gérer ces évènements

Essayer ce code

Dans l’exemple ci-dessus, on utilise les méthodes hide() et show() qui nous servent respectivement à cacher un contenu et à afficher un contenu caché.

On commence donc par cacher notre paragraphe possédant un attribut class='p2' afin qu’il ne s’affiche pas par défaut.

Ensuite, on crée un premier gestionnaire d’évènement en utilisant la méthode jQuery mouseenter() sur notre élément disposant de l'attribut class='p1'.

Le principe est le suivant : dès qu’un utilisateur passe le curseur de sa souris sur notre élément p1, l’élément p2 est dévoilé grâce à la méthode show() que l’on a précisé à l’intérieur de la fonction anonyme de notre gestionnaire d’évènements.

Ensuite, on créé un deuxième gestionnaire d’évènement pour à nouveau cacher notre paragraphe p2 lorsque l’utilisateur sort de l’élément p1.

Ici, je me suis également permis d'ajouter une bordure de couleur différente à chacun de nos paragraphes afin que l'on distingue bien le moment où l'on rentre dans p1 et celui où on en sort.

La méthode hover()

Pour répondre à la fois à l’évènement mouseenter et à mouseleave, on peut utiliser la méthode jQuery hover() qui va être une combinaison des méthodes mouseenter() et mouseleave().

Cette méthode va donc prendre deux fonctions en arguments : la première va être exécutée lorsque la souris va entrer dans un élément, tandis que la seconde va être exécutée lorsque la souris va sortir de l’élément.

Nous allons reprendre notre exemple précédent et l’adapter en utilisant hover() :

On utilise la méthode jQuery hover() pour gérer mouseenter et mouseleave

Essayer ce code

Nous appliquons donc hover() à notre élément p1 et créons nos deux fonctions. La première fonction, qui sera exécutée lorsqu’un utilisateur passe sa souris sur p1, a pour rôle d’afficher p2. La seconde fonction va elle cacher à nouveau p2 lorsqu’un utilisateur sort de l'élément p1.

Les méthodes mousedown() et mouseup()

Les méthodes jQuery mousedown() et mouseup() vont respectivement nous permettre de gérer les évènements « le bouton de la souris est enfoncé sur un élément » et « bouton de souris relâché ».

Reprenons une nouvelle fois notre exemple précédent en utilisant cette fois-ci mousedown() et mouseup() pour bien comprendre comment ces méthodes fonctionnent en pratique.

Utilisation des méthodes jQuery mousedown() et mouseup()

Essayer ce code

Dans l’exemple précédent, nous essayons une nouvelle fois d’afficher notre paragraphe p2 puis de le cacher ensuite.

Cependant, cette fois-ci, il ne suffit plus de passer sur p1 pour afficher p2 : p2 ne va s’afficher que si l’utilisateur reste cliqué sur p1 (évènement mousedown), et disparaître ensuite dès que le bouton de la souris est relâché (évènement mouseup).

Chapitre précédent

Chapitre suivant