Bagaimana untuk melaksanakan jQuery untuk membuat menu hilang apabila mengklik elsewhere_jquery

Contoh dalam artikel ini menerangkan cara melaksanakan jQuery untuk membuat menu hilang apabila mengklik di tempat lain. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

<script type="text/javascript">
  function stopPropagation(e) {
    if (e.stopPropagation) 
      e.stopPropagation();//停止冒泡  非ie
    else 
      e.cancelBubble = true;//停止冒泡 ie
  }
  $(document).bind('click',function(){
    $('#test').css('display','none');
  });
  $('#test').bind('click',function(e){
  //写要执行的内容....吥啦不啦
    stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
  });
</script>

Perkaranya seperti ini, sebagai contoh, jika saya mengklik pada div, menu akan dipaparkan apabila saya mengklik di tempat lain, menu itu hilang diklik, menu akan dipaparkan Jika dokumen diklik, menu akan dipaparkan hanya sembunyikan menu, tetapi jika anda mengklik pada div, ia bersamaan dengan mengklik pada dokumen, jadi laksanakan pernyataan yang akan dilaksanakan. acara klik div, dan kemudian tamatkan gelembung js, jika tidak, acara klik div akan dilaksanakan dan terus menggelembung Pergi ke acara dokumen dan laksanakan kandungan klik dokumen

Apa yang saya maksudkan ialah div juga tergolong dalam dokumen, jadi mengklik pada div juga mengklik pada dokumen Oleh itu, tanpa sebarang sekatan, apabila mengklik pada div, kaedah div dan dokumen akan dilaksanakan berada dalam Klik kaedah div untuk berhenti menggelegak Kaedah khusus adalah menggunakan kaedah e.stopPropagation() → "terpakai kepada bukan-iaitu", e.cancelBubble=true

Idea lain ialah untuk menentukan sumber pencetus yang merupakan kaedah klik dokumen Jika ia adalah div, tiada operasi akan dilakukan, iaitu, kembali Jika ia bukan div, maka menu akan disembunyikan mengikuti

Objek peristiwa mengandungi atribut penting: target(W3C)/srcElement(IE) Atribut ini mengenal pasti elemen asal yang mencetuskan peristiwa Idea kedua ialah menggunakan atribut ini. Kami boleh mengikat pengendali acara secara langsung kepada acara klik dokumen dan menentukan dalam pengendali acara sama ada sumber acara ialah elemen div dengan id==test atau sub-elemennya Jika ya, kaedah pulangan tidak melakukan apa-apa operasi. Jika tidak, acara disembunyikan.

$(document).bind('click',function(e){
    var e = e || window.event; //浏览器兼容性
    var elem = e.target || e.srcElement;
    while (elem) { //循环判断至跟节点，防止点击的是div子元素
      if (elem.id && elem.id=='test') {
        return;
      }
      elem = elem.parentNode;
    }
    $('#test').css('display','none'); //点击的不是div或其子元素
});

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Ringkasan teknik data json operasi jQuery", "Ringkasan khas penukaran jQuery kesan dan teknik", " Ringkasan kesan dan teknik khas seret dan lepas jQuery", "Ringkasan teknik sambungan jQuery", "Ringkasan jQuery klasik biasa kesan khas", "animasi jQuery dan kesan khas Ringkasan penggunaan ", "ringkasan penggunaan pemilih jquery " dan "pemalam biasa jQuery dan ringkasan penggunaan "

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.