Hentikan Fungsi Terpanggil Ganda dengan Cara Mengatasi Click Event Jalan Dua Kali Javascript

Ditulis oleh JavaScript

Cara mengatasi click event jalan dua kali javascript paling cepat adalah melepas listener ganda lalu menghentikan bubbling yang tidak perlu. Cek dulu apakah fungsi bind dipanggil dua kali, setelah itu perbaiki dengan guard, removeEventListener, atau stopPropagation sesuai penyebabnya.

Penyebab Click Event Jalan Dua Kali di Browser

Fungsi terpanggil dua kali hampir selalu berarti browser mengeksekusi dua listener untuk satu klik. Polanya berulang pada tiga kondisi ini.

  • addEventListener terpasang dua kali karena script dimuat ulang atau fungsi init() dipanggil setiap render.
  • Event bubbling dari child ke parent membuat dua listener aktif, misalnya tombol di dalam card yang sama-sama mendengarkan click.
  • Tombol di dalam form memicu click sekaligus submit, sehingga handler jalan lalu halaman ikut reload.

Tabel Diagnosis Klik Ganda dengan Cepat

Samakan gejala yang muncul dengan baris tabel supaya perbaikan tidak salah sasaran.

Kondisi Penyebab Solusi
console.log muncul dua kali Listener dipasang dua kali Pindahkan bind keluar fungsi berulang
Counter bertambah dua Init dipanggil setiap render Tambah guard sebelum bind
Aksi parent ikut jalan Bubbling child ke parent Pakai stopPropagation

Cek listener aktif lewat getEventListeners(element) di Chrome DevTools. Audit juga kode init, pastikan tidak dipanggil dari dua tempat berbeda.

BACA JUGA:

Cara Memperbaiki Listener yang Terpasang Ganda

Ikuti urutan ini supaya listener lama tidak menumpuk.

  1. Pastikan DOM siap sebelum bind, misalnya dengan menaruh script di akhir body atau memakai DOMContentLoaded.
  2. Pindahkan addEventListener keluar dari fungsi yang dipanggil berulang.
  3. Gunakan flag guard atau removeEventListener bila tombol memang harus di-bind ulang.
  4. Tambahkan stopPropagation hanya bila parent dan child sama-sama butuh listener.
// SALAH: dipanggil setiap render
function init() {
  document.querySelector("#kirim").addEventListener("click", kirimData);
}
init();
init();
// BENAR
const tombol = document.querySelector("#kirim");

if (!tombol.dataset.bound) {
  tombol.dataset.bound = "true";
  tombol.addEventListener("click", (event) => {
    event.stopPropagation();
    kirimData();
  });
}

Atribut data-bound mencegah bind kedua. Pemanggilan stopPropagation memutus rambatan klik ke parent, sehingga kirimData hanya jalan sekali.

Cara Mencegah Klik Ganda Terulang

  • Gunakan event delegation satu kali untuk elemen dinamis, misalnya satu listener di parent daftar tombol.
  • Nonaktifkan tombol sementara saat fetch berjalan, lalu aktifkan lagi setelah respons selesai.
  • Pisahkan fungsi bind agar tidak dipanggil setiap render atau setiap perubahan state.

FAQ

Kenapa console.log click muncul dua kali padahal klik sekali?

Listener yang sama biasanya terpasang dua kali karena fungsi init berjalan berulang.

Apakah stopPropagation selalu memperbaiki klik ganda?

Tidak, ia hanya tepat untuk kasus bubbling dari child ke parent.

Bagaimana mencegah double submit saat tombol diklik cepat?

Nonaktifkan tombol selama request berjalan atau gunakan flag proses sedang aktif.

Artikel Terkait