jQuery bricht ein bestimmtes Klickereignis ab-js-Tutorial-php.cn

jQuery bricht ein bestimmtes Klickereignis ab

PHPz

Freigeben： 2018-10-11 16:22:59

Original

1177 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode von jQuery zum Abbrechen bestimmter Klickereignisse vorgestellt und die zugehörigen Techniken von jQuery zur einfachen Implementierung der Ereignisbindung und zum Abbrechen der Ereignisbindung anhand von Beispielen analysiert

Wie wir alle wissen, kann jQuery dasselbe Ereignis mehrmals binden und jedes gebundene Ereignis kann ausgeführt werden. Hier kommt das Problem. Im dynamisch generierten DOM binden wir zwei verschiedene Klicks (angenommen A und B) für ein bestimmtes Element. Beim Anhängen des Elements werden alle Elemente erneut an B gebunden ... Dies führt zum Finale Wenn Sie darauf klicken, wird das B-Ereignis verdoppelt.

Glücklicherweise bietet uns jQuery eine sehr elegante Möglichkeit, Klicks unter einem bestimmten Namespace abzubrechen.

<!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>

Nach dem Login kopieren

Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial