td 右鍵彈出菜單（右擊帶參數）

html

• menu

<div class = "menu">
     <ul>
         <li onclick = "jy_menu(0)">添加</li>
         <li onclick = "jy_menu(1)">刪除</li>
         <li onclick = "jy_menu(2)">複製</li>
         <li onclick = "jy_menu(3)">粘貼</li>
     </ul>
 </div>

• table

<tr  class="list_data column_one">
   <td>早餐</td>
   <td data-dishid="2" class="td_click">西紅柿炒雞蛋（20)<br/><br/><br/><br/></td>
   <td>西紅柿（10）<br/>雞蛋（10）<br/><br/><br/></td>
   <td data-dishid="3" class="td_click">牛肉燉柿子（30）<br/><br/><br/><br/></td>
   <td>牛肉（20）<br/>柿子（10）<br/><br/><br/></td>
   <td data-dishid="4" class="td_click">炒三絲（20）<br/><br/><br/><br/></td>
   <td>土豆（5）</br/>燈籠椒（5）<br/>胡蘿蔔（5）<br/>花生油</td>
   <td data-dishid="5" class="td_click"></td>
   <td></td>
   <td data-dishid="6" class="td_click"></td>
   <td></td>
 </tr>

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