Saya sedang mengembangkan halaman web menggunakan jQuery. Di halaman web ini, ada tag div yang berisi tag p dan button.

Kode HTML seperti ini:

<div class="container">
    <div id="attribute" style="border:solid;border-width:2px;border-color:#ccc">
        <p id="cell-content" style="display:inline">Id</p>
        <button id="remark-view" class="btn btn-primary">Detail</button>
    </div>
</div>

Dan kode JavaScript yang sesuai adalah seperti ini:

$(document).ready(function(){
    $("#attribute").on('click', function(){
        console.log("click on the div attribute");
    });
    $("#attribute").on('dblclick', function(){
        console.log("double click on the div attribute");
    });
    $("#remark-view").on('click', function(){
        console.log("click on the button remark-view");
    });
});

Seperti yang ditunjukkan oleh kode, div luar memiliki elemen anak p dan tombol, dan elemen div luar mendengarkan pada peristiwa klik tunggal dan klik dua kali sementara elemen tombol dalam mendengarkan pada peristiwa klik tunggal.

Ketika saya menjalankan kode di browser saya dan mengklik tombol, konsol menunjukkan bahwa kedua fungsi klik dari div luar dan elemen tombol dalam dipanggil, yang bertentangan dengan tujuan saya: hanya fungsi klik tombol dalam yang harus dipanggil saat ini situasi. Jadi, apakah ada cara untuk memblokir acara klik untuk elemen ayah (dalam hal ini, elemen div luar). Dengan kata lain, apakah ada cara untuk berhenti meneruskan acara klik ke elemen ayah setelah elemen anak menanganinya? ?

Terima kasih sebelumnya!

2
pageajpeng 11 Agustus 2017, 06:44

2 jawaban

Jawaban Terbaik

Fungsi stopPropagation akan menghentikan acara agar tidak menggelegak DOM.

$("#remark-view").on('click', function(event){
        console.log("click on the button remark-view");
        event.stopPropagation()
    });

Dari dokumentasi jQuery

Mencegah acara menggelegak pohon DOM, mencegah penangan induk apa pun diberi tahu tentang acara tersebut.

4
flyer 11 Agustus 2017, 03:49

Ini adalah sesuatu yang saya gunakan di salah satu situs saya untuk melakukan sesuatu yang mirip dengan masalah Anda. Apa yang dilakukan kode di bawah ini adalah mencegah div tengah menutup jika klik tombol ada di div itu.

//Function for the pop up with the background dimmer
  $(document).mouseup(function(x) {
    var container = $("#divContent"),
       dimmer = $('#bgDimmer');
     if (container.is(":visible")) {
       if (!container.is(x.target) //check if the target of the click isn't the container...
         && container.has(x.target).length === 0) {
          container.hide();
          dimmer.hide();
        }
    }
});

Mari coba hubungkan dengan kode Anda.

//Function for the pop up with the background dimmer
  $(document).mouseup(function(x) {
    var attribute = $('#attribute');
     if (attribute.is(":visible")) {
       if (!attribute.is(x.target) //check if the target of the click isn't the container...
         && attribute.has(x.target).length === 0) {
          console.log("click on the button remark-view");
        }
    }
});
0
Sand 11 Agustus 2017, 03:58