如何給頁面新增追加右鍵選單（原右鍵選單功能保持不變）

王铁柱6發表於2024-12-08

要給頁面新增自定義的右鍵選單，同時保留瀏覽器預設的右鍵選單功能，你需要使用 JavaScript 監聽 contextmenu 事件，並阻止其預設行為，然後顯示你自定義的選單。以下是一個示例：

<!DOCTYPE html>
<html>
<head>
<title>Custom Context Menu</title>
<style>
  #custom-menu {
    position: absolute;
    display: none;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    padding: 5px;
  }

  #custom-menu li {
    list-style: none;
    padding: 5px 10px;
    cursor: pointer;
  }

  #custom-menu li:hover {
    background-color: #eee;
  }
</style>
</head>
<body>

<div id="custom-menu">
  <ul>
    <li id="option1">Option 1</li>
    <li id="option2">Option 2</li>
    <li id="option3">Option 3</li>
  </ul>
</div>

<script>
  const customMenu = document.getElementById('custom-menu');
  const option1 = document.getElementById('option1');
  const option2 = document.getElementById('option2');
  const option3 = document.getElementById('option3');

  document.addEventListener('contextmenu', (event) => {
    event.preventDefault(); // 阻止預設右鍵選單

    customMenu.style.display = 'block';
    customMenu.style.left = event.pageX + 'px';
    customMenu.style.top = event.pageY + 'px';
  });

  // 點選頁面其他地方隱藏自定義選單
  document.addEventListener('click', (event) => {
    if (event.target !== customMenu && !customMenu.contains(event.target)) {
      customMenu.style.display = 'none';
    }
  });

  // 自定義選單選項的點選事件
  option1.addEventListener('click', () => {
    alert('Option 1 clicked!');
    customMenu.style.display = 'none'; // 點選後隱藏選單
  });

  option2.addEventListener('click', () => {
    alert('Option 2 clicked!');
    customMenu.style.display = 'none';
  });

  option3.addEventListener('click', () => {
    alert('Option 3 clicked!');
    customMenu.style.display = 'none';
  });
</script>

</body>
</html>

程式碼解釋:

  1. HTML 結構: 建立一個隱藏的 <div> 作為自定義選單，包含 <ul> 和 <li> 元素表示選單項。

  2. CSS 樣式: 設定自定義選單的樣式，包括定位、背景、邊框等。

  3. JavaScript 邏輯:

    • contextmenu 事件監聽: 監聽整個文件的 contextmenu 事件 (右鍵點選)。
    • event.preventDefault(): 阻止瀏覽器預設的右鍵選單行為。
    • 顯示自定義選單: 設定自定義選單的 display 屬性為 block，並根據滑鼠點選位置設定其 left 和 top 屬性，使其顯示在正確的位置。
    • 點選其他地方隱藏選單: 監聽 click 事件，如果點選的目標不是自定義選單或其子元素，則隱藏自定義選單。
    • 選單項點選事件: 為每個選單項新增 click 事件監聽，執行相應的操作，並在點選後隱藏選單。

關鍵點:

  • event.preventDefault() 是阻止瀏覽器預設右鍵選單的關鍵。
  • 注意處理自定義選單的顯示和隱藏邏輯，確保使用者體驗良好。
  • 可以根據需要自定義選單的樣式和功能。

這個例子提供了一個基本的框架，你可以根據自己的需求修改和擴充套件，例如：

  • 動態生成選單項
  • 根據不同的上下文顯示不同的選單
  • 新增更豐富的選單功能，例如複製、貼上等

希望這個例子能幫助你!

相關文章