Rumah > Artikel > hujung hadapan web > jQuery membatalkan acara klik tertentu

jQuery membatalkan acara klik tertentu

PHPzasal: 2016-05-16 15:57:521177semak imbas

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>

Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial video JavaScript

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JS dan css melaksanakan pengesanan perubahan dalam orientasi peranti mudah alih dan pertimbangan kemahiran screens_javascript mendatar dan menegakArtikel seterusnya：JS dan css melaksanakan pengesanan perubahan dalam orientasi peranti mudah alih dan pertimbangan kemahiran screens_javascript mendatar dan menegak

Artikel berkaitan

Lihat lagi