jq自定义右键弹出菜单

---

1 html部分

<div id="menu" style="display:none;">
        <ul>
            <li>关闭当前页</li>
            <li>关闭其他</li>
            <li>关闭所有</li>
            <li>刷新</li>
        </ul>
    </div>

2 css部分

#menu{width: 120px; background: #f3f3f3;border: 1px solid #D3D3D3;padding: 10px 0;z-index: 9999;position:absolute;}
#menu ul li{white-space:nowrap;cursor: pointer;font-size: 12px;height: 24px;line-height: 24px;padding: 0 10px;}
#menu ul li:hover{background: #E2E2E2;}

3 jquery部分

$("div").on('contextmenu', function (e) {//鼠标右击事件
     $('#menu').show().css({
         'top': e.pageY + 'px', //获取右键点击坐标
         'left': e.pageX + 'px' //获取右键点击坐标
     });
     e.preventDefault();//取消事件的默认动作
 });
 //点击任意地方隐藏右键菜单
 $(document).click(function () {
     $('#menu').hide();
 })

也可以用js

window.onload = function(){  
    var menu = document.getElementById("menu");  
    document.getElementById("mtree").oncontextmenu = function(event){  
        var event = event || window.event;  
        //显示菜单  
        menu.style.display = "block";  
        //菜单定位  
        menu.style.left = event.clientX+"px";  
        menu.style.top = event.clientY+"px";  
        //return false为了屏蔽默认事件  
        return false;  
    };  
    //再次点击，菜单消失  
    document.onclick=function(){  
        menu.style.display = "none";  
    };  
};