jQuery membatalkan acara klik tertentu-tutorial js-php.cn

jQuery membatalkan acara klik tertentu

PHPz

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

asal

1182 orang telah melayarinya

Artikel ini terutamanya memperkenalkan kaedah jQuery untuk membatalkan acara klik tertentu, dan menganalisis teknik berkaitan jQuery untuk hanya melaksanakan pengikatan acara dan membatalkan pengikatan acara dalam bentuk contoh Rakan yang memerlukan boleh merujuknya

Seperti yang kita semua tahu, jQuery boleh mengikat acara yang sama beberapa kali, dan setiap peristiwa terikat boleh dilaksanakan. Inilah masalahnya. Dalam DOM yang dijana secara dinamik, kami mengikat dua klik berbeza (diandaikan sebagai A dan B) untuk elemen tertentu Apabila menambahkan elemen, semua elemen terikat kepada B semula... Ini akan membawa kepada yang terakhir Apabila diklik, acara B akan menjadi dua kali ganda.

Nasib baik, jQuery menyediakan kami cara yang sangat elegan untuk membatalkan klik di bawah ruang nama tertentu.

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

Salin selepas log masuk

Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial video JavaScript