js實現右鍵單擊打開自定義的菜單

　　今天分享一個，單擊鼠標右鍵彈出自定義菜單，選中不同菜單選項，實現其對應功能

　   首先先自已定義一個菜單

    <div id="menu">
        <ul>
            <li>添加</li>
            <li>刪除</li>
            <li>修改</li>
        </ul>
    </div>

　　對菜單進行簡單的樣式設置，並且設置為隱藏狀態

    #menu {
        width: 80px;
        background: #CCC;
        position: absolute;
        display: none;
    }

　主體區域的內容代碼

    <div id="content">
        前端通常是指網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前台代碼實現，現在最新的高級版本HTML5、CSS3，以及SVG等。
        HTML、CSS、JavaScript是前端開發中最基本也是最必須的三個技能。前端的開發中，在頁面的布局時，
        HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互。雖然表面看起來很簡單，但這里面需要掌握的東西絕對不會少。在進行開發前，需要對這些概念弄清楚、弄明白，這樣在開發的過程中才會得心應手。
    </div>

　　在這個content容器里實現鼠標的右鍵打開菜單功能，主要的js代碼如下

<script>
　　　　//　獲取當前的元素
        var content = document.getElementById("content");      
        content.oncontextmenu = function (ev) {
            //阻止鼠標的默認事件
            ev.preventDefault();
            //做一些兼容性的處理
            var ev = ev || event;
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            menu.style.display = "block";
            menu.style.left = ev.clientX + "px";
            //當滑動滾動條時也能准確獲取菜單位置
            menu.style.top = ev.clientY + scrollTop + "px";
            // return false;
        }
        // 事件委托的方式 實現自定義菜單的功能
        var ul = document.querySelector('ul')
        ul.onclick = function (e) {
            var t = e.target
            if (t.innerText == '添加') {
               輸入你想實現的功能代碼，並且點擊后把菜單隱藏
                menu.style.display = "none";

            }
        }       
    </script>    

　　通過事件委托，判斷每次點擊菜單的內容，寫出相應的邏輯代碼，完成相應的功能。

       contextmenu事件支持所有 HTML 元素，這意味者你可以給不同的元素，自定義不同的右鍵菜單。