jQuery annule un clic spécifique event

jQuery annule un clic spécifique event_jquery

WBOY

Libérer： 2016-05-16 15:13:14

original

1455 Les gens l'ont consulté

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>

Copier après la connexion

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.