自訂右鍵選單

自訂右鍵選單

　自訂右鍵選單，對於某些ERP系統，功能操作比較多，所以我們通常把常用的幾個功能放在自訂的右鍵選單裡方便使用者使用。

　實作自訂選單很簡單，首先我們要屏蔽原始的右鍵選單，自訂選單出現在滑鼠的位置，點擊隱藏自訂選單，過程就是這樣的。

*{margin:0;padding:0}
a{text-decoration:none}
ul li{list-style:none}
.menu{border:1px solid black;border-radius:5px;display:inline-block;position:fixed;top:100px;left:550px;
overflow:hidden;padding-bottom:10px;box-shadow:0 0 10px 0;z-index:999;display:none;background:white}
.menu ul li{height:30px;width:100%}
.menu ul li a{height:30px;display:inline-block;width:100%;text-align:left;line-height:30px;padding:5px 10px}
.menu li a:hover{background-color:#EEF5E2}

<div class="menu" id="demo">
    <ul>
        <li><a href="#">向录入员发送消息</a></li>
        <li><a href="#">发送选中作业</a></li>
        <li><a href="#">设置作业状态</a></li>
        <li><a href="#">哈哈哈哈哈</a></li>
        <li><a href="#">嘻嘻嘻嘻嘻</a></li>
        <li><a href="#">呵呵呵呵呵呵</a></li>
    </ul>
  </div>

　1.屏蔽原始的右鍵選單

　　在JS中提供了一個事件來完成這件事就是oncontextmenu，這個是事件綁定的區域在點擊右鍵時將不會再出現原始右鍵選單:

document.oncontextmenu = function(){  return false;
}

2.取得自訂選單的大小

　　自訂選單初始是隱藏的，對於隱藏的元素我們是沒有辦法來獲取它的寬高的。我們可以先將選單元素設定為visibility:hidden,取得到元素的寬高後在去掉這個屬性：

function getHideDOMWH(obj){
      //obj为菜单元素的DOM对象
      var wh = {};
      obj.style.visibility = "hidden";
      wh.w = obj.scrollWidth;
      wh.h = obj.scrollHeight;
      obj.style.visibility = null;
      return wh;
  }

　　3.自訂選單出現在目前滑鼠的位置

　　首先我們就需要取得目前的滑鼠的位置，目前滑鼠位置就是自訂選單出現的位置。同時要注意距右側距離或距下面的距離不足以顯示選單的情況：

document.onmousedown = function(e){
    //obj为菜单元素DOM对象
    var e = e || window.event;
    if(e.button==2){
        var left = e.clientX;
        var top = e.clientY;
        var windowHeight = document.body.scrollHeight;
        var windowWidth = document.body.scrollWidth;
        var wh = getHideDOMWH(obj);
        var contentHeight = wh.h;
        var contentWidth = wh.w;
        obj.style.left = windowWidth-left>contentWidth?left+"px":windowWidth-contentWidth+"px";
        obj.style.top = windowHeight-top>contentHeight?top+"px":top-contentHeight+"px";
        obj.style.display = "inline-block";
    }
}

　　當瀏覽器視窗的寬度減去遊標點擊時距離左邊的距離小於選單的寬度的時候，說明遊標距離右邊的距離已經不足以顯示選單了，我們就讓選單的緊貼右側，此時選單的left值為瀏覽器視窗的寬度減去選單的寬度。當瀏覽器視窗的高度減去遊標距離上側的距離小於選單的高度時，說明此時間標距離下面的距離不足以顯示選單了，此時選單的top值為遊標距離上面的距離減去選單的高度。

　　4.無論是點擊選單元素或其他元素都隱藏選單

document.onclick = function(){    //obj为菜单元素DOM对象
    obj.style.display = "none";
}

為了使用方便我們可以將上面的這個過程封裝成一個方法，或者在原生JS的Element的原型上擴展一個方法（IE7及以下是會報錯的），或者是JQ的原型上，這裡我們封裝一個方法。

function contextMenu(obj){
      //obj为DOM对象
      document.oncontextmenu = function(){
          return false;
      }
      document.onmousedown = function(e){
          var e = e||window.event;
          if(e.button==2){
              var mouseX = e.clientX;
              var mouseY = e.clientY;
              var wh = getObjWH(obj);
              var contentW = wh.w;
              var contentH = wh.h;
              var documentW = document.body.scrollWidth;
              var documentH = document.body.scrollHeight;
              obj.style.left = documentW-mouseX<contentW?documentW-contentW+"px":mouseX+"px";
              obj.style.top = documentH-mouseY<contentH?mouseY-contentH+"px":mouseY+"px";
              obj.style.display = "inline-block";
          }
          
      }
      document.onclick = function(){
          obj.style.display = "none";
      }
      function getObjWH(obj){
          var wh = {};
          obj.style.visibility = "hidden";
          wh.w = obj.scrollWidth;
          wh.h = obj.scrollHeight;
          obj.style.visibility = null;
          return wh;
      }
  }

我們所有的事件都是綁定在document上的而事件我們通常會使用冒泡機制，如果我們在某個元素上設置了取消冒泡則會有一些問題，我們需要做一些針對性的處理。