鼠標右鍵點擊彈出菜單（jQuery）

禁用瀏覽器默認事件，此處是兼容寫法

$(document).contextmenu(function (e) {
  var event = e || window.event;
  if (event.preventDefault) {
    event.preventDefault(); // 防止瀏覽器默認行為(W3C)
  } else {
    event.returnValue = false; // IE中阻止瀏覽器行為
  }
});

 

封裝右鍵函數rightClickMouse（），也可將禁用默認瀏覽器事件封裝到此函數中，由於我的項目中如果沒有先選中列表項，就不會調用右鍵函數，因此首先全局禁用瀏覽器默認事件了~

function rightClickMouse(obj, callback) {//給選擇器obj綁定右鍵事件
  $(document).on( 'mousedown',obj,function (e) { 

   var $t = $(this); 

   if (e.which == 3) { 

       if (typeof callback == 'function') { 

  callback($t); 
        } 
    } 
  }); 
}

右鍵菜單默認隱藏，相對於body絕對定位（absolute），z-index值盡量大，使其位於界面最上層，通過獲取鼠標點擊的位置來對菜單進行定位；

注意HTML中右鍵菜單的位置是body標簽的子元素；

從后台獲取列表數據並以無序列表顯示，然后給li綁定點擊事件。

此處有個坑：由於li是動態添加的節點，因此直接使用$('#itemList>li').click()是無效的！！！

//給點擊的li標簽綁定click事件,則只有選中相機列表時才可彈出右鍵菜單

 $('#itemList').on('click', 'li', function () { 
       rightClickMouse('#cameraList>li', function () {
          $(document).contextmenu(function (e) {
            // 獲取窗口尺寸
            var winWidth = $(document).width();
            var winHeight = $(document).height();
            // 鼠標點擊位置坐標
            var mouseX = e.pageX;
            var mouseY = e.pageY;
            // ul標簽的寬高
            var menuWidth = $(".contextmenu").width();
            var menuHeight = $(".contextmenu").height();
            // 最小邊緣margin(具體窗口邊緣最小的距離)
            var minEdgeMargin = 10;
            // 以下判斷用於檢測ul標簽出現的地方是否超出窗口范圍
            // 第一種情況：右下角超出窗口
            if (mouseX + menuWidth + minEdgeMargin >= winWidth &&
              mouseY + menuHeight + minEdgeMargin >= winHeight) {
              menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
              menuTop = mouseY - menuHeight - minEdgeMargin + "px";
            }
            // 第二種情況：右邊超出窗口
            else if (mouseX + menuWidth + minEdgeMargin >= winWidth) {
              menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
              menuTop = mouseY + minEdgeMargin + "px";
            }
            // 第三種情況：下邊超出窗口
            else if (mouseY + menuHeight + minEdgeMargin >= winHeight) {
              menuLeft = mouseX + minEdgeMargin + "px";
              menuTop = mouseY - menuHeight - minEdgeMargin + "px";
            }
            // 其他情況：未超出窗口
            else {
              menuLeft = mouseX + minEdgeMargin + "px";
              menuTop = mouseY + minEdgeMargin + "px";
            };
            // ul菜單出現
            $(".contextmenu").css({
              "left": menuLeft,
              "top": menuTop
            }).show();
          });
          // 點擊頁面任意地方之后，右鍵菜單隱藏
          $(document).click(function () {
            $(".contextmenu").hide();
          });

        });
});