自定義右鍵菜單

自定義右鍵菜單

　　技術一般水平有限，有什麼錯的地方，望大家指正。　　　

　　自定義右鍵菜單，對於一些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上的而事件我們通常會使用冒泡機制，如果我們在某個元素上設置了取消冒泡則會有一些問題，我們需要做一些針對性的處理。