Javascript: onclick, tag didalam tag (parent and child)

Masalah ini berawal dari sebuah thread yang ada di Kaskus disitu ada pertanyaan bagaimana mengatasi event click pada sebuah div yang merupakan child dari div yang juga mempunyai event click pada div tersebut. Jika digambarkan kurang lebih, tampilan format div tersebut seperti ini.

Kalo menggunakan format javascript biasa seperti ini

function parent_click(){
   alert("parent diklik");
}
function child_click(){
   alert("child diklik");
}

Maka ketika diklik pada bagian child, akan terjadi 2 kali pemanggilan event klik, yang pertama event untuk child dan yang kedua pada parent. Tentu hal in agak sedikit menggangu, untuk mengatasinya bisa dengan 2 cara yaitu 

1. Menggunakan logika pemrograman pada Javascript.
2. Menggunakan CSS style.

Menggunakan logika pemrograman pada Javascript

Disini kita mengunakan logika atau mengakalinya dengan coding itu sendiri, yaitu dengan membuat sebuah variabel global untuk pengecekan event ketika diklik pada fungsi parent, berikut contoh kode untuk menangani masalah tersebut.

var childOnClick = false;
function parent_click(){
   if(childOnClick) {
       childOnClick=false;
       return;
   }
   alert("parent diklik");
}
function child_click(){
   childOnClick=true;
   alert("child diklik");
}

Diatas saya buat sebuah variabel yaitu childOnClick yang akan digunakan ketika fungsi parent_click dipanggil, jika dia true berarti event berasal dari div pada child yang diklik, dan hal ini diabaikan.

Menggunakan CSS style

Penggunaan ini lebih gampang, yaitu dengan menambahkan kode css yaitu z-index pada tag div tersebut, misalkan tag parentnya adalah <parent> dan tag childnya <child>, jadi pada tag child ditambah menjadi seperti ini.

<div id="parent" style="z-index:0" >
<!-- kode disini -->
</div>
<div id="child"  style="z-index:2" >
<!-- kode disini -->
</div>

Nilai z-index dari child harus lebih besar dari nilai z-index untuk parent.


========= C-x C-c ==========

Tulis Komentar dengan akun Facebook Anda.