Bagaimana untuk Mencipta Menu Klik Kanan Tersuai pada Halaman Web Tanpa Perpustakaan?

Mencipta Menu Klik Kanan Tersuai pada Halaman Web

Untuk menambah menu klik kanan tersuai pada halaman web anda tanpa perpustakaan pra-bina , anda boleh memanfaatkan acara menu konteks. Berikut ialah pecahan proses:

1. Dengar Acara Menu Konteks:

Acara menu konteks dicetuskan apabila pengguna mengklik kanan pada elemen dalam halaman web anda. Untuk mendengar acara ini, gunakan kod JavaScript berikut dalam dokumen anda; bahagian:

<code class="javascript">if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    // Here you will draw your own menu
    // However, don't forget to use e.preventDefault() to disable the default context menu
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    alert("You've tried to open context menu");
    window.event.returnValue = false;
  });
}</code>

2. Halang Menu Lalai:

Secara lalai, penyemak imbas akan memaparkan menu konteksnya sendiri. Untuk mengelakkan ini, anda mesti memanggil e.preventDefault() dalam pendengar acara. Ini akan menyekat menu lalai, membenarkan anda memaparkan menu tersuai anda sebaliknya.

3. Paparkan Menu Tersuai Anda:

Kini, anda boleh mencipta menu klik kanan tersuai anda menggunakan HTML, CSS dan JavaScript. Anda boleh menentukan kedudukan menu, saiz dan kandungan. Di bawah ialah contoh kod untuk memaparkan menu ringkas dengan dua pilihan:

<code class="javascript">// Create the menu element
var menu = document.createElement('div');
menu.id = 'custom-menu';

// Style the menu
menu.style.position = 'absolute';
menu.style.backgroundColor = '#ffffff';
menu.style.border = '1px solid #000000';
menu.style.zIndex = '10';

// Add menu items
var item1 = document.createElement('div');
item1.innerHTML = 'Option 1';
item1.onclick = function() {
  alert('Clicked Option 1');
};

var item2 = document.createElement('div');
item2.innerHTML = 'Option 2';
item2.onclick = function() {
  alert('Clicked Option 2');
};

// Append items to the menu
menu.appendChild(item1);
menu.appendChild(item2);

// Append the menu to the document
document.body.appendChild(menu);</code>

4. Letakkan Menu:

Akhir sekali, anda perlu meletakkan menu berbanding kursor tetikus. Anda boleh mendapatkan semula kedudukan kursor daripada sifat e.clientX dan e.clientY objek acara. Kemudian, laraskan kedudukan menu dengan sewajarnya.

Ingat, ini adalah contoh yang mudah dan anda boleh menyesuaikan menu tersuai anda untuk memenuhi keperluan khusus anda. Dengan mengikuti langkah ini, anda boleh mencipta menu klik kanan yang berfungsi sepenuhnya tanpa sebarang perpustakaan luaran.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Klik Kanan Tersuai pada Halaman Web Tanpa Perpustakaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!