Javascript Addeventlistener Right Click

MUAZHAN

3 min read

·

Jun 20, 2024

39

Share

Menggunakan addEventListener untuk Mengatur Klik Kanan di JavaScript

addEventListener dalam JavaScript memungkinkan kita untuk menangani berbagai macam event pada elemen HTML. Salah satunya adalah event contextmenu yang dipicu saat pengguna melakukan klik kanan pada elemen.

Cara Menggunakan addEventListener untuk Klik Kanan

1. Pilih Elemen:

   • Gunakan document.querySelector atau document.getElementById untuk memilih elemen yang ingin direspons saat klik kanan.

2. Tambahkan Event Listener:

   • Gunakan addEventListener dengan contextmenu sebagai parameter pertama untuk menempelkan fungsi handler.

3. Buat Fungsi Handler:

   • Fungsi handler ini akan dijalankan saat event contextmenu terjadi. Di sini Anda bisa menulis kode untuk menangani klik kanan, seperti menampilkan menu konteks kustom, mencegah menu default, atau tindakan lainnya.

Contoh Penggunaan

const myElement = document.querySelector('.my-element');

myElement.addEventListener('contextmenu', (event) => {
  // Mencegah menu konteks default
  event.preventDefault();

  // Tampilkan menu konteks kustom
  const menu = document.createElement('div');
  menu.innerHTML = 'Menu Kustom';

  // Posisikan menu di bawah kursor
  menu.style.position = 'absolute';
  menu.style.left = event.clientX + 'px';
  menu.style.top = event.clientY + 'px';

  // Tambahkan menu ke halaman
  document.body.appendChild(menu);
});

Penjelasan Kode:

• myElement adalah variabel yang menyimpan referensi ke elemen yang ingin kita tangani.
• addEventListener dilampirkan ke elemen dengan event contextmenu.
• Fungsi handler menerima objek event sebagai argumen.
• event.preventDefault() mencegah menu konteks default muncul.
• Kode selanjutnya membuat dan memanipulasi sebuah element div sebagai menu konteks kustom.
• Posisi menu diatur agar muncul di bawah kursor menggunakan event.clientX dan event.clientY.

Penting!

• Mencegah Default: event.preventDefault() sangat penting untuk mencegah menu konteks default muncul dan memungkinkan kita mengendalikan tampilan menu konteks kustom.
• Perilaku Default: Jika Anda tidak ingin mencegah menu konteks default, cukup hapus baris event.preventDefault().

Aplikasi Praktis

• Menu Konteks Kustom: Menampilkan menu konteks khusus untuk tindakan tertentu.
• Menu Konteks Dinamis: Memuat menu konteks berdasarkan konteks elemen yang diklik kanan.
• Tindakan Spesifik: Melakukan tindakan khusus, seperti menyalin teks atau mengunduh file, saat klik kanan.

Dengan menggunakan addEventListener dan event contextmenu, Anda bisa mengontrol perilaku klik kanan pada halaman web dan membuatnya lebih interaktif dan sesuai kebutuhan Anda.