Pada zaman dan zaman hari ini, apabila anda mengklik kanan pada mana-mana halaman web, senarai akan muncul dengan beberapa pilihan dan ciri. Menu pop timbul ini juga dipanggil menu konteks, iaitu menu pop timbul lalai yang disediakan oleh penyemak imbas. Item dalam senarai menu ini akan berbeza antara penyemak imbas. Sesetengah pelayar menawarkan lebih banyak ciri, manakala yang lain menawarkan ciri terhad.
Tetapi berikut ialah cara untuk menambah menu konteks tersuai atau menu klik kanan pada halaman web anda, anda boleh menambah seberapa banyak pilihan yang anda mahu. Tetapi sebelum anda boleh menambah menu konteks tersuai, anda perlu menukar tingkah laku klik kanan lalai pada halaman web, yang membuka menu konteks lalai. Menambah menu konteks tersuai melibatkan dua langkah berikut:
Tukar tingkah laku lalai untuk menunjukkan menu klik kanan lalai.
Tambah menu konteks tersuai kami sendiri dan paparkannya pada halaman web dengan klik kanan tetikus.
Mari kita fahami dua langkah di atas secara terperinci langkah demi langkah melalui contoh kod sebenar.
Untuk menunjukkan menu konteks tersuai kami apabila mengklik kanan pada halaman web, mula-mula kami perlu mengalih keluar atau menyembunyikan menu konteks lalai dengan memberikan fungsi yang mengandungi kaedah preventDefault() kepada document.oncontextmenu Perubahan acara tingkah laku lalai klik kanan, yang memanggil fungsi ini apabila pengguna mengklik kanan pada halaman web.
Mari bincangkan pelaksanaan sebenar kelakuan lalai yang menghalang penyembunyian menu konteks lalai.
Langkah 1 − Dalam langkah pertama, kami akan mencipta dokumen HTML dan membuat halaman web untuk menguji kod kami.
Langkah 2 - Dalam langkah ini, kami akan menambah acara oncontextmenu dalam dokumen HTML kerana menu akan muncul apabila mengklik kanan pada keseluruhan halaman web.
Langkah 3 - Dalam langkah terakhir, kami akan mentakrifkan fungsi JavaScript dengan kaedah preventDefault() atau mengembalikan pernyataan palsu untuk menghalang menu konteks lalai daripada muncul.
Contoh di bawah akan menggambarkan cara menukar tingkah laku lalai menu konteks lalai dan menyembunyikannya−
<html>
<body>
<div style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
<h2>It is the Demo web page for testing. </h2>
</div>
<script>
document.oncontextmenu = hideRightClickMenu;
function hideRightClickMenu(event) {
event.preventDefault()
// OR
// return false;
}
</script>
</body>
</html>
Dalam contoh di atas, kami melihat cara untuk mengalih keluar atau menyembunyikan fungsi menu konteks lalai apabila mengklik kanan pada halaman dengan menetapkan fungsi menggunakan kaedah preventDefault().
Mari kita fahami cara menambah menu konteks tersuai dan menjadikannya kelihatan apabila mengklik kanan pada halaman.
Langkah 1 - Dalam langkah pertama kami akan membuat senarai item yang mesti dipaparkan dalam menu konteks dan memastikannya kelihatan: Tiada secara lalai ia hanya akan kelihatan jika anda mengklik kanan pada halaman.
Langkah 2 - Dalam langkah seterusnya, kami akan menggunakan elemen