jQuery annule un événement de clic spécifique-js tutoriel-php.cn

jQuery annule un événement de clic spécifique

PHPz

Libérer： 2018-10-11 16:22:59

original

1210 Les gens l'ont consulté

Cet article présente principalement la méthode jQuery d'annulation d'événements de clic spécifiques et analyse les techniques associées de jQuery pour implémenter simplement la liaison d'événement et annuler la liaison d'événement sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

. 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(){
      $("#pTest").click(function(){
        alert("正式事件。");
      });
    });
    function bindEvent(){
      for(var i=0;i<3;i++){
        $("#pTest").bind("click.test",function(){
          testEvent();
        });
      }
    }
    function testEvent(){
      alert("测试事件");
    }
    function ignoreMultiEvent(){
      $("#pTest").unbind("click.test").bind("click.test",function(){
        testEvent();
      });
    }
  </script>
</head>
<body>
  <p id="pTest" style="height: 163px;text-align:center;line-height:163px;width: 500px; background-color: #0000FF;">
    点我进行测试
  </p>
  <input id="Button2" type="button" value="为上面的p绑定3次测试事件" onclick="bindEvent()" />
  <input id="Button1" type="button" value="保留正式事件， 取消已绑定的多次测试事件，再绑定一次测试事件 " onclick="ignoreMultiEvent()" />
</body>
</html>

Copier après la connexion

Pour plus de didacticiels connexes, veuillez visiter Tutoriel vidéo JavaScript