js實作仿桌面右鍵，出現右鍵菜單功能

最終樣式如下：

功能需求：和電腦桌面一樣，灰色的是自定義桌面區域（或全屏，或固定大小範圍，本次為固定大小舉例），綠色的為右鍵菜單，當點選右鍵時，需顯示菜單，左鍵單點消失。

**

實作思路：**

0、首先禁用浏覽器自帶預設右鍵行為。
1、兩個盒子，一個桌面區域div，一個右鍵菜單div。
2、菜單預設隐藏，在桌面div中點選右鍵，顯示菜單。
3、拿到右鍵點選的left和top值，并将彈窗定位到這個位置。
4、最後檢查點選位置，控制菜單顯示區域，防止菜單超出桌面。           

你需要知道的js方法：

1、右鍵事件：oncontextmenu
2、禁用浏覽器預設行為 e.preventDefault()
3、擷取div左上角坐标 div.offsetLeft 和 div.offsetTop
4、擷取div實際寬高 div.getBoundingClientRect().width 和 div.getBoundingClientRect().height
5、Dom基本操作           

開始：

現将樣式寫出來：

HTML代碼：

<div id="box">
    <div id="menu">右鍵菜單</div>
</div>
           

CSS代碼：

 <style>

    #box {
      width: 1000px;
      height: 600px;
      background: #Ccc;
      margin: 0 auto;
      margin-top: 100px
    }

    #menu {
      position: absolute;
      min-width: 100px;
      height: 200px;
      background: #9f9;
      display: none;
    }
    
  </style>           

實作js邏輯：

var box = document.getElementById('box'); // 桌面區域
    var menu = document.getElementById('menu') // 右鍵菜單
    let b_w = box.getBoundingClientRect().width; // 桌面區域寬度
    let b_h = box.getBoundingClientRect().height; // 桌面區域高度
    let b_cX = box.offsetLeft; // box左上角left
    let b_cY = box.offsetTop; //  box左上角top
    
    box.oncontextmenu = function (e) { // 右鍵事件
      menu.style.display = "block"; // 菜單顯示
      menu.style.top = e.clientY + 'px' // 根據點選位置定位菜機關置top
      menu.style.left = e.clientX + 'px'  // 根據點選位置定位菜機關置left
      let m_w = menu.getBoundingClientRect().width; // 菜單寬度
      let m_h = menu.getBoundingClientRect().height; // 菜單高度

      // 控制菜單彈出區域，不能超過桌面右側和下側最大範圍
      if (e.clientX > (b_cX + b_w - m_w)) {
        menu.style.left = (e.clientX - m_w) + 'px'  // 如果菜單超出桌面寬度，讓菜單向左偏移本身寬度
      }
      if (e.clientY > (b_cY + b_h - m_h)) {
        menu.style.top = (b_cY + b_h - m_h - 5) + 'px'  //  如果菜單超出桌面高度，讓菜單定位到這個位置，為了美觀，菜單欄與底部桌面留有5px間距
      }
    }


    // window區域點選菜單欄均消失
    window.onclick = function (e) {
      menu.style.display = "none";
    }
    
    // 禁用window區域右鍵預設菜單彈窗
    window.oncontextmenu = function (e) {
      e.preventDefault();
    }           

-

以上就是部落客實作的右鍵菜單實作方式，如果有更好的方式，歡迎溝通。

wechat：villinWeChat