Sign in Subscribe
Javascript

Double Click Event: Aksi Ganda dalam Satu Sentuhan

Double Click Event: Aksi Ganda dalam Satu Sentuhan
Photo by Oscar Ivan Esquivel Arteaga / Unsplash

Saat menggunakan aplikasi web, ada kalanya kita ingin menjalankan aksi khusus ketika pengguna melakukan double click atau klik dua kali pada suatu elemen. JavaScript menyediakan event dblclick yang bisa kita manfaatkan untuk menangani interaksi ini. Misalnya, kita bisa menggandakan teks, memperbesar gambar, atau membuka detail tambahan hanya dengan satu kali double click.

Artikel ini akan membahas apa itu event dblclick, bagaimana cara menggunakannya, serta contoh penerapannya dalam berbagai skenario interaktif.

Apa Itu dblclick Event?

dblclick adalah event dalam JavaScript yang dipicu ketika pengguna mengklik elemen dua kali secara berurutan dalam waktu singkat. Event ini sering digunakan untuk memberikan aksi ganda pada elemen tanpa harus menambahkan tombol tambahan.

Sintaks dasar untuk menangani dblclick event:

element.addEventListener("dblclick", function() {
    // Aksi yang akan dilakukan ketika elemen diklik dua kali
});

Cara Menggunakan Double Click Event

1. Menangani Double Click pada Tombol

Contoh paling sederhana adalah menambahkan aksi double click pada tombol:

<button id="doubleClickBtn">Klik Dua Kali</button>
<p id="pesan"></p>

document.getElementById("doubleClickBtn").addEventListener("dblclick", function() {
    document.getElementById("pesan").textContent = "Tombol diklik dua kali!";
});

Ketika tombol diklik dua kali, teks dalam paragraf akan berubah menjadi "Tombol diklik dua kali!".

2. Mengubah Warna Elemen dengan Double Click

Jika kita ingin mengubah warna latar belakang suatu elemen saat pengguna melakukan double click:

<div id="kotak" style="width: 100px; height: 100px; background: gray;"></div>

document.getElementById("kotak").addEventListener("dblclick", function() {
    this.style.backgroundColor = "blue";
});

Ketika div diklik dua kali, warnanya akan berubah menjadi biru.

3. Memperbesar Gambar dengan Double Click

Double click juga sering digunakan untuk memperbesar gambar:

<img id="gambar" src="image.jpg" width="200">

document.getElementById("gambar").addEventListener("dblclick", function() {
    this.style.width = "400px";
});

Dengan kode ini, gambar akan menjadi lebih besar saat diklik dua kali.

Menggunakan dblclick Bersama click

Kadang kita ingin membedakan aksi single click dan double click dalam satu elemen. Untuk itu, kita bisa menggunakan setTimeout agar JavaScript bisa membedakan klik biasa dan klik ganda:

let timer;
const tombol = document.getElementById("doubleClickBtn");

tombol.addEventListener("click", function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
        console.log("Klik biasa");
    }, 300);
});

tombol.addEventListener("dblclick", function() {
    clearTimeout(timer);
    console.log("Klik dua kali");
});

Kode ini akan menjalankan aksi klik biasa jika hanya satu kali klik, dan aksi double click jika pengguna mengklik dua kali dalam waktu singkat.

Delegasi Event untuk Elemen Dinamis

Jika elemen dibuat secara dinamis, event listener harus ditambahkan ke elemen induknya menggunakan event delegation.

<ul id="daftar">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<button id="tambah">Tambah Item</button>

const daftar = document.getElementById("daftar");
document.getElementById("tambah").addEventListener("click", function() {
    const itemBaru = document.createElement("li");
    itemBaru.textContent = "Item Baru";
    daftar.appendChild(itemBaru);
});

daftar.addEventListener("dblclick", function(event) {
    if (event.target.tagName === "LI") {
        event.target.style.color = "red";
    }
});

Dengan event delegation, kita bisa menangani event double click pada elemen <li> yang ditambahkan setelah halaman dimuat.

Kapan Harus Menggunakan dblclick Event?

✅ Jika ingin menjalankan aksi berbeda dengan single click.
✅ Jika ingin memperbesar gambar atau elemen dengan mudah.
✅ Jika ingin menyediakan shortcut untuk aksi tertentu tanpa menambah tombol tambahan.
✅ Jika ingin membuat pengalaman pengguna lebih interaktif.

❌ Jangan gunakan dblclick untuk aksi yang lebih baik dilakukan dengan hover atau single click.

Kesimpulan

  • Double click event (dblclick) digunakan untuk menangani aksi klik dua kali pada elemen web.
  • Bisa digunakan untuk mengubah warna, memperbesar elemen, atau menampilkan fitur tambahan tanpa tombol tambahan.
  • Jika ingin membedakan antara single click dan double click, gunakan setTimeout().
  • Event delegation diperlukan jika ingin menangani elemen yang dibuat secara dinamis.

Dengan memahami cara kerja dblclick, kita bisa meningkatkan pengalaman pengguna dengan interaksi yang lebih kaya dalam aplikasi web.

Read next