在Bootstrap下用JavaScript自定义右键菜单

其实不用Bootstrap也行的，纯属为了好看……

首先要在需要弹出右键菜单的地方屏蔽掉浏览器默认的右键菜单：

    

        123
    

然后写showmenu这个函数：

function showmenu(){
            document.getElementById("tree").onmousedown = function(e){
                if(e.which == 3){
                    if (!e) {
                        e = window.event;
                    }else {
                        e.srcElement = e.target;
                    }
                    if(e.srcElement.innerHTML != ""){
                        document.getElementById("rightmenu").style.left = e.clientX + "px";
                        document.getElementById("rightmenu").style.top = e.clientY + "px";
                        document.getElementById("rightmenu").style.display = "block";
                    }
                }
            }
        }

在body里写好右键菜单：

    

            

                
听说我是第一个菜单项
                
我是第二个菜单项
                
我是最后一个咯
            
    

这里就用了Bootstrap里的一些CSS样式了。
为了让“菜单”及时消失掉，需要在JavaScript里加这么一个函数：

function hiddenrightmenu(){
            document.getElementById("rightmenu").style.display = "none";
        }

然后在body标签里加上它：

这样右键菜单就可以及时弹出并隐藏了。