recherche

Maison >interface Web >js tutoriel >jQuery annule un clic spécifique event_jquery

jQuery annule un clic spécifique event_jquery

WBOY
WBOYoriginal
2016-05-16 15:13:141477parcourir

L'exemple de cet article décrit la méthode d'implémentation jQuery pour annuler un événement de clic spécifique. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Comme nous le savons tous, jQuery peut lier le même événement plusieurs fois et chaque événement lié peut être exécuté. Voici le problème. Dans le DOM généré dynamiquement, nous lions deux clics différents (supposés être A et B) pour un certain élément lors de l'ajout de l'élément, tous les éléments sont à nouveau liés à B... Cela mènera au résultat final. Lorsque vous cliquez dessus, l'événement B doublera.

Heureusement, jQuery nous offre un moyen très élégant d'annuler des clics sous un espace de noms spécifique.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>无标题页</title>
  <script src="jquery/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
      $("#divTest").click(function(){
        alert("正式事件。");
      });
    });
    function bindEvent(){
      for(var i=0;i<3;i++){
        $("#divTest").bind("click.test",function(){
          testEvent();
        });
      }
    }
    function testEvent(){
      alert("测试事件");
    }
    function ignoreMultiEvent(){
      $("#divTest").unbind("click.test").bind("click.test",function(){
        testEvent();
      });
    }
  </script>
</head>
<body>
  <div id="divTest" style="height: 163px;text-align:center;line-height:163px;width: 500px; background-color: #0000FF;">
    点我进行测试
  </div>
  <input id="Button2" type="button" value="为上面的DIV绑定3次测试事件" onclick="bindEvent()" />
  <input id="Button1" type="button" value="保留正式事件， 取消已绑定的多次测试事件，再绑定一次测试事件 " onclick="ignoreMultiEvent()" />
</body>
</html>

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets de glisser et des compétences JQuery", "Résumé des compétences de l'extension jQuery" , "Résumé des effets spéciaux classiques communs de JQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "jQuery plug-ins courants et résumé d'utilisation》

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explorez angulairejs+requirejs pour implémenter pleinement la routine de chargement à la demande_AngularJSArticle suivant：Explorez angulairejs+requirejs pour implémenter pleinement la routine de chargement à la demande_AngularJS

Articles Liés

Voir plus