Javascript Addeventlistener Click Outside

MUAZHAN

3 min read

·

Jun 20, 2024

41

Share

Cara Menggunakan addEventListener untuk Klik di Luar Elemen di JavaScript

Dalam pengembangan web, terkadang kita membutuhkan fungsionalitas untuk menjalankan kode ketika pengguna mengklik di luar suatu elemen tertentu. Misalnya, menutup dropdown menu atau modal ketika pengguna mengklik di luar area tersebut.

JavaScript menyediakan cara mudah untuk mencapai hal ini menggunakan addEventListener dan EventTarget.contains().

Langkah-langkah:

1. Identifikasi Elemen Target: Tentukan elemen HTML yang akan menjadi target dari event klik di luar.
2. Tambahkan addEventListener ke document: Gunakan addEventListener pada objek document untuk mendeteksi setiap klik pada halaman.
3. Gunakan EventTarget.contains(): Dalam handler event, periksa apakah target klik merupakan elemen target atau berada di dalam elemen target menggunakan EventTarget.contains().
4. Jalankan Kode: Jika target klik bukan bagian dari elemen target, jalankan kode yang ingin Anda eksekusi.

Contoh:

const dropdownMenu = document.getElementById('myDropdown');

document.addEventListener('click', (event) => {
  if (!dropdownMenu.contains(event.target)) {
    // Tutup dropdown menu
    dropdownMenu.classList.remove('show');
  }
});

Kode di atas akan menutup dropdown menu myDropdown ketika pengguna mengklik di luar area dropdown menu.

Penjelasan:

• document.addEventListener('click', ...): Menambahkan event listener untuk event "click" pada objek document.
• event.target: Mengacu pada elemen HTML yang diklik oleh pengguna.
• !dropdownMenu.contains(event.target): Memeriksa apakah elemen target klik bukan bagian dari myDropdown.
• dropdownMenu.classList.remove('show'): Menghapus class show dari myDropdown, yang mungkin digunakan untuk menampilkan dropdown menu.

Penting:

• Pastikan untuk menggunakan event listener yang tepat untuk skenario Anda.
• Hindari menggunakan event.stopPropagation() untuk mencegah event "click" dipropagasikan ke elemen induk, karena dapat memengaruhi fungsionalitas lainnya.

Kesimpulan:

Dengan menggunakan addEventListener dan EventTarget.contains(), kita dapat dengan mudah mendeteksi klik di luar elemen tertentu dan menjalankan kode yang diperlukan. Hal ini memungkinkan kita untuk membangun antarmuka web yang lebih interaktif dan responsif.