td 右键弹出菜单（右击带参数）

html

• menu

     

         
添加
         
删除
         
复制
         
粘贴
     
 

• table

   早餐
   西红柿炒鸡蛋（20)




   西红柿（10）
鸡蛋（10）



   牛肉炖柿子（30）




   牛肉（20）
柿子（10）



   炒三丝（20）




   土豆（5）
灯笼椒（5）
胡萝卜（5）
花生油
   
   
   
   
 

css

.menu{width:155px;background:#fff;box-shadow:1px 1px 30px #ccc;display:none;position:absolute; text-align: center;}
.menu ul{margin:0!important;}
.menu ul li{list-style:none;line-height:35px;border-bottom:1px solid #ddd;}
.menu ul li:hover{background:#ffdb2c;}

$(function(){
    //首先屏蔽到浏览器自带的右键功能
    document.oncontextmenu = function(){
        return false;
    };
    $(".td_click").unbind("mousedown").bind("mousedown", function (e) {
        // dishid-dish
        console.log(e.currentTarget.dataset.dishid);
        //右击鼠标
        if(e.which == 3){
            var x = e.clientX; //x坐标
            var y = e.clientY; //y坐标
             //获取menu的长宽
             var menuHeight = $(".menu").height();
             var menuWidth = $(".menu").width();
             //获取浏览器的可见长宽
             var clintHeight = getClientHeight();
             var clintWidth = getClientWidth();
             //判断
             if(menuHeight + y >= clintHeight){
                 y = clintHeight - menuHeight - 8;
             }
             if(menuWidth + x >= clintWidth){
                 x = clintWidth - menuWidth - 8;
             }
             //之前必须要绝对定位才行
             $(".menu").show().css({left:x,top:y});
        } 
    });
});
//点击空白隐藏鼠标右键
$(document).click(function(){
    $(".menu").hide();
});

//响应事件
 function jy_menu(i){
 switch(i){
     case 0:
         alert("这是添加操作");break;
     case 1:
         alert("这是删除操作");break;
     case 2:
         alert("这是复制操作");break;
     default:
         alert("这是粘贴操作");
     }
 }
// 浏览器的可见高度
 function getClientHeight() {
     var clientHeight = 0;
     if (document.body.clientHeight && document.documentElement.clientHeight) {
         clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
     } else {
         clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
     }
     return clientHeight;
 }
 
// 浏览器的可见宽度
 function getClientWidth() {
     var clientWidth = 0;
     if (document.body.clientWidth && document.documentElement.clientWidth) {
         clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
     } else {
         clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
     }
     return clientWidth;
 }