jquery deuxième clic annuler l'événement

Lorsque vous utilisez jQuery pour implémenter des pages interactives, il est souvent nécessaire de lier les événements de clic à des boutons ou à des éléments. Dans certains scénarios, il suffit à l'utilisateur de cliquer une fois pour déclencher certaines opérations, tandis que dans d'autres scénarios, l'utilisateur doit cliquer à nouveau pour annuler l'exécution de l'opération. Alors, comment utiliser jQuery pour lier un événement de clic et implémenter la fonction d'annulation au deuxième clic ?

1. Utilisez l'événement click de jQuery

jQuery fournit un événement click pour lier l'événement click d'un élément. Par exemple :

$(".btn").click(function() {
  console.log("button clicked");
});

Ce code liera l'événement click à l'élément avec la classe "btn". Lorsque l'on clique sur l'élément, "bouton cliqué" sera affiché sur la console.

2. Utilisez la fonction bascule de jQuery

Afin d'implémenter la fonction d'annulation au deuxième clic, nous pouvons utiliser la fonction bascule fournie par jQuery. La fonction bascule bascule l'exécution entre deux fonctions de rappel. Par exemple :

$(".btn").toggle(
  function() {
    console.log("button clicked");
  },
  function() {
    console.log("button clicked again");
  }
);

Dans cet exemple, lorsque l'élément de classe "btn" est cliqué pour la première fois, la première fonction de rappel sera exécutée et "bouton cliqué" sera affiché et lorsqu'il sera cliqué pour la deuxième fois ; , il sera exécuté. La deuxième fonction de rappel affiche "bouton cliqué à nouveau". Cette méthode est relativement simple, mais elle ne convient que pour basculer entre deux situations.

3. Utilisez la fonction on de jQuery

Par rapport aux limitations de la fonction bascule, nous pouvons utiliser la fonction on de jQuery pour implémenter de manière plus flexible la fonction d'annulation au deuxième clic. La fonction on peut lier plusieurs événements à des éléments et lier des fonctions de gestion d'événements via la délégation d'événements. Par exemple :

$(".btn").on("click", function() {
  if ($(this).attr("data-clicked") == "true") {
    console.log("button clicked again");
    $(this).attr("data-clicked", "false");
  } else {
    console.log("button clicked");
    $(this).attr("data-clicked", "true");
  }
});

Dans cet exemple, nous lions l'événement click à l'élément avec la classe "btn" et ajoutons un attribut personnalisé "data-clicked" sur l'élément pour déterminer si l'élément a été cliqué. Lorsque l'élément est cliqué pour la première fois, "bouton cliqué" est affiché et l'attribut "données cliquées" est défini sur "true". Lorsqu'il est cliqué pour la deuxième fois, "bouton cliqué à nouveau" est affiché et l'attribut est affiché. est défini sur "false". De cette façon, nous pouvons implémenter la fonction d'annulation au deuxième clic.

Résumé

Utilisez jQuery pour implémenter la fonction d'annulation du deuxième clic, qui peut être obtenue via la fonction bascule ou les attributs personnalisés et la délégation d'événements. Il est nécessaire de choisir une méthode appropriée en fonction du scénario réel afin de contrôler plus facilement l'interaction de l'utilisateur sur la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!