Maison > Article > interface Web > jQuery annule un événement de clic spécifique

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

PHPzoriginal: 2016-05-16 15:57:521182parcourir

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>

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

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：JS et CSS implémentent la détection des changements d'orientation des appareils mobiles et le jugement des compétences d'écrans horizontaux et verticaux_javascriptArticle suivant：JS et CSS implémentent la détection des changements d'orientation des appareils mobiles et le jugement des compétences d'écrans horizontaux et verticaux_javascript

Articles Liés

Voir plus