JavaScript自定义右键菜单

　　本功能主要是实现自定义右键菜单，同时隐藏默认的右键菜单，只显示自己需要的菜单

　　HTML：

　　

<!--自定义右键菜单html代码-->
<div id="menu">
    <ul>
        <li>帮助</li>
        <li>设置</li>
        <li>复制</li>
        <li>粘贴</li>
        <li>剪切</li>
    </ul>
</div>

　　css：

　　

<style>
        *{ margin: 0; padding: 0; }
        #menu{
            width: 80px;
            background: #CCC;
            position: absolute;
            display: none;
        }
        #menu ul{
            width: 100%;
            list-style: none;
            border: 2px solid #666;
            border-bottom: 0px;
        }
        #menu ul li{
            height: 30px;
            font-size: 16px;
            color: #333;
            line-height: 30px;
            text-align: center;
            border-bottom: 2px solid #666;
        }
    </style>

　　JavaScript：

　　

<script>
    window.onload=function(){
        var menu=document.getElementById("menu");

        document.oncontextmenu=function(ev){
            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;
        }

        //点击空白部分+菜单
        document.onclick= function () {
            menu.style.display='none';
            console.log(this);
        }

        //点击菜单
        menu.onclick = function(e) {
            var e = e || window.event;
            e.cancelBubble = true;
        }
    }
</script>