鼠标右击事件显示菜单栏

像桌面一样右击显示菜单栏

 ul, li {
            margin: 0;
            padding: 0;
        }

        #myMenu{
            list-style: none;
            width: 80px;
            border: 1px solid #ccc;
            border-bottom: none;
            position: absolute;
            display: none;
            background:#808080;
        }

        #myMenu li{
            border-bottom: 1px solid #ccc;
            padding: 5px 10px;
            cursor: pointer;
            background:#fff;
        }

        #myMenu li:hover{
            background-color: #ccc;
        }




 <ul id="myMenu">
                    <li>增加</li>
                    <li>修改</li>
                    <li>删除</li>
                    <li>禁用</li>
                    <li>修改简码</li>
                    <li>查找</li>
                    <li>全部</li>
                    <li>打印</li>
                </ul>




     window.onload = function(){
            //去掉默认的contextmenu事件，否则会和右键事件同时出现。
            document.oncontextmenu = function (e) {
                e.preventDefault();
                    document.getElementById("test").onmousedown = function (e) {            
                var byMenu = document.getElementById("Menu");//获取id
                document.addEventListener("contextmenu", function (event) {
                    if (event.srcElement != document.getElementById("test")) {//不是我想要的地方不出来
                        return;
                    }
                    event.preventDefault();
                    byMenu.style.display = "block";
                    //获取鼠标视口位置
                    byMenu.style.top = event.clientY + "px";
                    byMenu.style.left = event.clientX + "px";
                    
                });
                
                document.addEventListener("click", function (event) {
                    byMenu.style.display = "none";//左击时隐藏
                });
             
            
                }
        }
    };