鼠标右键点击弹出菜单（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();
          });

        });
});