Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah menu klik kanan tersuai pada halaman web?

Bagaimana untuk menambah menu klik kanan tersuai pada halaman web?

WBOYke hadapan: 2023-09-15 23:29:02936semak imbas

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.

Alih keluar atau sembunyikan menu konteks lalai

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

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

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

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
Langkah 3 - Dalam langkah terakhir, kami akan menambah fungsi JavaScript pada menu tersuai untuk memaparkannya pada halaman web selepas pengguna mengklik kanan pada halaman.

Contoh

Contoh berikut akan menggambarkan cara menghalang menu konteks lalai daripada dipaparkan dan cara menambah serta menunjukkan menu konteks tersuai −

<html>
<head>
   <style>
      #customContextMenu {
         position: absolute;
         background-color: #84abb5;
         color: white;
         height: 150px;
         width: 100px;
         text-align: center;
      }
      .menuItems {
         list-style: none;
         font-size: 12px;
         padding: 0;
         margin: 0;
      }
      .menuItems .items { padding: 5px; border-bottom: 1px solid #e6d4b6;}
      .menuItems .items:last-child { border: none;}
      .menuItems .items a {text-decoration: none; color: white;}
   </style>
</head>
<body>
   <div style = "background-color: green; color: white; height: 150px; text-align: center;">
   <h2> Add a custom right-click menu to a webpage </h2>
   <p> Please right click to to see the menu </p>
   </div>
   <div id = "customContextMenu" style = "display: none;">
   <ul class = "menuItems">
   <li class = "items"><a href = "#"> Menu Item-1 </a></li>
   <li class = "items"><a href = "#"> Menu Item-2 </a></li>
   <li class = "items"><a href = "#"> Menu Item-3 </a></li>
   <li class = "items"><a href = "#"> Menu Item-4 </a></li>
   <li class = "items"><a href = "#"> Menu Item-5 </a></li>
   <li class = "items"><a href = "#"> Menu Item-6</a></li>
   </ul>
   </div>
   <script>
      // hiding the menu on click to the document
      function hideCustomContextMenu() {
         document.getElementById('customContextMenu').style.display = "none";
      }
      
      // toggling the menu on right click to the page
      function showCustomContextMenu(event) {
         event.preventDefault();
         var myContextMenu = document.getElementById('customContextMenu');
         if (myContextMenu.style.display == "block") {
            myContextMenu.style.display = "none";
         }
         else {
            myContextMenu.style.display = "block";
            myContextMenu.style.left = event.pageX + "px";
            myContextMenu.style.top = event.pageY + "px";
         }
      }
      document.onclick = hideCustomContextMenu;
      document.oncontextmenu = showCustomContextMenu;
   </script>
</body>
</html>

Dalam contoh ini, kami menyembunyikan menu konteks lalai dan memaparkan menu konteks ciptaan kami sendiri apabila mengklik kanan pada halaman, pada kedudukan kursor apabila diklik.

Kesimpulan

Dalam artikel ini, kami mempelajari cara mengalih keluar atau menyembunyikan nilai konteks lalai apabila mengklik kanan pada halaman web dan memaparkan menu konteks tersuai kami sendiri dalam tindakan yang sama. Dengan cara ini kita boleh menambah menu konteks tersuai dengan pilihan yang kita mahu dipaparkan di dalamnya.

Atas ialah kandungan terperinci Bagaimana untuk menambah menu klik kanan tersuai pada halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html 事件

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Menganimasikan sifat ketinggian CSSArtikel seterusnya：Menganimasikan sifat ketinggian CSS

Artikel berkaitan

Lihat lagi