注册登录

鼠标右键点击弹出菜单（jQuery）

禁用浏览器默认事件，此处是兼容写法

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).delegate(obj, 'mousedown', 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事件,则只有选中相机列表时才可弹出右键菜单

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();
          });

        });
});
知识兔
计算机