Bagaimanakah saya boleh membuat menu klik kanan tersuai tanpa menggunakan perpustakaan pihak ketiga?

Membuat Menu Klik Kanan Tersuai

Menu klik kanan tersuai boleh meningkatkan pengalaman pengguna dengan menyediakan akses pantas kepada tindakan tertentu. Tutorial ini menunjukkan cara untuk mencapai fungsi ini tanpa bergantung pada perpustakaan pihak ketiga.

Menggunakan Acara Menu Konteks

Acara 'menu konteks' digunakan untuk mengesan betul- klik acara dalam penyemak imbas moden. Kod berikut menangkap acara ini:

<code class="js">if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    // Handle the right-click event and display your custom menu
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    // Handle the right-click event and display your custom menu
    window.event.returnValue = false;
  });
}</code>

Memaparkan Menu Tersuai

Dalam pengendali acara, anda boleh memaparkan menu tersuai anda. Ini boleh dicapai menggunakan HTML dan CSS untuk mencipta struktur dan penggayaan menu.

Sebagai contoh, kod berikut memaparkan menu konteks ringkas dengan dua pilihan:

<code class="html"><ul id="context-menu" style="display: none;">
  <li>Option 1</li>
  <li>Option 2</li>
</ul></code>

Dalam pengendali acara , anda kemudiannya boleh memanipulasi keterlihatan elemen ini untuk memaparkan menu apabila perlu.

Meletakkan Menu

Untuk meletakkan menu dengan betul, anda boleh menggunakan 'clientX ' dan sifat 'klienY' bagi objek 'e' yang disediakan oleh pengendali acara. Sifat ini mewakili koordinat kursor tetikus pada masa klik kanan.

<code class="js">var rect = document.getElementById('context-menu').getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
document.getElementById('context-menu').style.left = x + 'px';
document.getElementById('context-menu').style.top = y + 'px';</code>

Kod ini mengira kedudukan menu konteks berbanding kursor tetikus dan menetapkannya dengan sewajarnya.

Dengan melaksanakan langkah-langkah ini, anda boleh membuat menu klik kanan tersuai asas tanpa menggunakan perpustakaan pihak ketiga. Pendekatan ini memberikan kawalan yang lebih besar ke atas kefungsian dan penampilan menu, memastikan ia sejajar dengan keperluan khusus aplikasi web anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat menu klik kanan tersuai tanpa menggunakan perpustakaan pihak ketiga?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!