js自定義鼠標右鍵菜單

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

    switch(e.button) {
        case 0:
            console.log("鼠標左鍵")
        break;
    case 1:
        console.log("鼠標中間");
        break;
    case 2:
        console.log("鼠標右鍵");
            break;
        default:
            break;
    }
}

廢話不多說上代碼，核心知識是mousedown事件中的event對象中隱含了一個button屬性，這個屬性包含了3個值（IE瀏覽器有自己的一套實現機制，詳情見下圖，引用自W3School）：

由於瀏覽器默認有鼠標右鍵菜單，比如說查看網頁源代碼，復制，刷新，審查元素等快捷操作。有時候我們並不想使用系統默認的功能，這時候我們可以阻止系統的contextmenu事件就OK了，然后在鼠標右鍵點擊的時候，自己模擬一個菜單（比如說用div包裹一個ui列表）；

當我們點擊任何一個地方，右鍵菜單都應該消失才對，所以我們吧事件委托到document對象上。

document.onclick=function () {
    //取消右鍵菜單，設置元素display為none
    //。。。。。業務代碼
}

代碼只有世紀行，是不是很簡單呢？趕快動手做一個屬於你自己的右鍵菜單吧！