Heim > Artikel > Web-Frontend > jQuery bricht ein bestimmtes Klickereignis ab

jQuery bricht ein bestimmtes Klickereignis ab

PHPzOriginal: 2016-05-16 15:57:521182Durchsuche

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>

Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS und CSS implementieren die Erkennung von Änderungen in der Ausrichtung mobiler Geräte und die Beurteilung horizontaler und vertikaler Bildschirme. Javascript-FähigkeitenNächster Artikel：JS und CSS implementieren die Erkennung von Änderungen in der Ausrichtung mobiler Geräte und die Beurteilung horizontaler und vertikaler Bildschirme. Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen