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();
            // 获取鼠标当前的选中值
             text = window.getSelection().toString();  
            //做一些兼容性的处理
            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 元素，这意味者你可以给不同的元素，自定义不同的右键菜单。