Gestion des évènements déclenchés par la souris

45 min Niveau 7

Introduction

JQuery dispose de plusieurs méthodes permettant de gérer les événements liés à la souris, parmi le clic, le survol, etc...

Les méthodes click() et dblclick()

La méthode click() permet de gérer les événements de type “clic”, c'est-à-dire d'exécuter du code après un clic sur un élément.

La méthode dblclick() permet de gérer les événements de double-clic.

<!-- Code HTML de base -->
<body>
    <h1>Titre principal</h1>
    <div>
        <h2>Titre secondaire</h2>
        <p class="display">Je suis un paragraphe</p>
    </div>
</body>

$(document).ready(function(){
    //Lors d'un clic sur le div
    $("div").click(function () {
        //On inverse les classes de p
        $("p").toggleClass("hide display");
        //Les éléments avec la classe hide seront cachés
        $(".hide").hide();
        //Les éléments avec la classe display seront visibles
        $(".display").show();
    });
    /* Il est possible de l'écrire avec on()
    $("div").on('click', function() {
        //On inverse les classes de p
        $("p").toggleClass("hide display");
        //Les éléments avec .hide seront cachés
        $(".hide").hide();
        //Les éléments avec .display seront visibles
        $(".display").show();
    });
    */

    //Lors d'un double clic sur le div
    $("div").dblclick(function () {
        // Une couleur de fond rouge est appliquée
        $(this).css("background-color", "red");
    });
    /* Il est possible de l'écrire avec on()
    $("div").on('dblclick', function() {
        //On lui applique une couleur de fond rouge
        $(this).css("background-color", "red");
    });
    */
});

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !