滑鼠點選事件基本上是每個頁面必不可少的，絕大多數情況下都是普通的滑鼠左鍵點選，即可以通過click()方法來實現。

但是我們在很多情況下我們想通過滑鼠右鍵來實現一些功能的實現，比如說一個表格資料，表格的每行資料都可以進行刪除、修改、傳送等等操作，如果採用在每行都新增這些操作按鈕的話，這樣做起來很麻煩，並且佔據了很多空間。如果我們隊每行資料可以採用滑鼠右擊的方式，然後彈出操作選擇模組。這樣整個頁面顯得簡潔，並且操作起來也方便了很多。接下來我們就來是實現這個功能。

我們都知道，幾乎所有的瀏覽器，都有自己預設的滑鼠右鍵事件，經常重新整理網頁就是通過滑鼠右鍵，然後彈出一個選擇框，選擇我們要進行的操作。

首先第一步，我們要去除掉原有的預設事件。

通過JS遮蔽自帶右鍵選單

document.oncontextmenu = function(e){
         return false;
}

 滑鼠按下時mousedown事件，我們可以通過判斷e.which的值來確定是滑鼠的那個鍵按下。

$('#aa').mousedown(function(e){
    if(e.which == 3){  // 1 = 滑鼠左鍵 left; 2 = 滑鼠中鍵; 3 = 滑鼠右鍵
        alert("按下的是滑鼠右鍵");
    }
})

 這樣我們就修改了瀏覽器預設的滑鼠右鍵選單，接下來我們要在滑鼠的位置顯示我們自己的選單。

首先我們先在html中定義一個選單模組，其position一定要設為絕對定位，並且最好將其放在body的下一級，具體樣式的設定這裡就不再詳細描述了。

<div id="menu">
    <p id="del">刪除</p>
    <p id="update">修改</p>
    <p id="send">傳送資料</p>
</div>

 下一步當然就是當滑鼠右鍵點下時，獲取滑鼠的位置，然後將選單顯示在滑鼠的位置即可，如果點選滑鼠左鍵則隱藏右鍵選單。

$('table').mousedown(function(e){
    if(e.which == 3){  // 1 = 滑鼠左鍵; 2 = 滑鼠中鍵; 3 = 滑鼠右鍵
        var x = e.originalEvent.x || e.originalEvent.layerX || 0;
        var y = e.originalEvent.y || e.originalEvent.layerY || 0;
        $("#menu").css({
            left: x + "px";
            top: y + "px";
        });
        $("#menu").show();
    }
    if(e.which == 1){  //如果滑鼠左鍵點下，則隱藏右鍵選單
        $("#menu").hide();
    }
})

 

這樣我們就實現了滑鼠右鍵選單的改寫。

如果有興趣瞭解藉助Layui來動態獲取表格每行的資料及其對應欄位，然後對每行資料進行操作的小夥伴們，後續我們更新相應的部落格。

下篇部落格預告：藉助Layui來動態獲取表格每行的資料及其對應欄位，通過自定義的滑鼠右鍵選單對其進行操作

希望大家關注我，我會持續分享關於前端的一些經常遇到的問題。大家對我部落格的瀏覽、關注就是對我最大的支援，給予我的動力。’