如何在沒有庫的網頁上建立自訂右鍵選單？

在網頁上建立自訂右鍵選單

在不使用預先建置庫的情況下將自訂右鍵選單新增到您的網頁，您可以利用contextmenu 事件。以下是流程的細分：

1。監聽 Contextmenu 事件：

當使用者右鍵點擊網頁中的某個元素時，將觸發 contextmenu 事件。若要偵聽此事件，請在文件的

中使用下列 JavaScript 程式碼：部分：

<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。封鎖預設選單：

預設情況下，瀏覽器將顯示自己的上下文選單。為了防止這種情況，您必須在事件偵聽器中呼叫 e.preventDefault()。這將抑制預設選單，從而允許您顯示自訂選單。

3.顯示您的自訂選單：

現在，您可以使用 HTML、CSS 和 JavaScript 建立自訂右鍵選單。您可以定義選單的位置、大小和內容。以下是顯示兩個選項的簡單選單的範例程式碼：

<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。定位選單：

最後，您需要相對於滑鼠遊標定位選單。您可以從事件物件的 e.clientX 和 e.clientY 屬性中擷取遊標的位置。然後，相應地調整選單的位置。

請記住，這是一個簡化的範例，您可以自訂自訂選單以滿足您的特定要求。透過執行以下步驟，您可以建立一個功能齊全的右鍵選單，無需任何外部程式庫。

以上是如何在沒有庫的網頁上建立自訂右鍵選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！