JavaScript自定义鼠标右键菜单

下面为JavaScript代码

window.onload = function () {
//好友列表
    var f = 0;
    //判断指定id的元素在页面中是否存在
    if (document.getElementById("menu")) {
    　　var menu1 = document.getElementById("menu");
    　　f = 1;
    }

　　document.oncontextmenu = function (e) {
        //菜单定位
        //阻止执行默认的鼠标右键事件
        e.preventDefault();
        if (f == 1) {
            menu1.style.display = "block";
            //设置自定义菜单的坐标
            menu1.style.left = e.offsetX + "px";
            menu1.style.top = e.clientY - 100 + "px";
        }
        return false;//目的也是阻止执行默认的鼠标右键事件且必须放在最后
      }

    if (document.getElementById("contain")) {
        document.getElementById("contain").onmousedown = function (e) {
        //右击时显示菜单，点击左键或滚轮时隐藏菜单，设置菜单的默认visibility：hidden
        if (e.button == 2) {
        menu1.style.visibility = "visible";
        } else {
        menu1.style.visibility = "hidden";
        }
    　}
    }
}    

 

对应的页面div格式可以如下

//css样式另外设置
<div id="contain">
</div>
<div id=menu class="menu">
　　<div class="menu-item">菜单选项一</div>
　　<div class="menu-item">菜单选项二</div>
</div>

contain "<div>"标签中可以放其它的控件，菜单选项也可以换成超链接或者是按钮