js实现右键菜单的一个实例

要求在tab上面增加一个右键菜单，里面包含两个选项：删除全部选项，删除其他选项。

html代码：

<div id="clickMenu" style="display:none; font-size:12px; background-color:white; border:2px solid rgb(246,244,240); list-style-type:none; border: node; text-align:left; width: 120px; border-bottom-color: 2px solid red;">
<ul  style="list-style-type:none; margin-top: 5px ; margin-left :-5px;border-color:2px splid #white; " >
    <li id = "divUl"><input type="button" value="关闭所有" onclick="removeAll()" style = "border:none; padding: 1px; margin-top: 10px; background-color: white;"/></li> 
    <hr style = "size: 1px; margin-top:10px;margin-top:10px;">
    <li id = "divUls" style = "magin-top:10px;"><input type="button" value="关闭其他" onclick="removeOther()" style = "border:none;padding: 1px; margin-top: -30px; background-color: white;"/></li>
    <li ><input id="hideInput" style="display:none;"/></li>
</ul>
</div>

js代码：

function mouseClick(){
    //屏蔽浏览器的右键
    document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} 
    //绑定一个鼠标监听事件
    $("#my_tab").on("mousedown", "li", function(e) {
        //当鼠标右键的时候，e.which的值是3，左键点击和中间滑轮点击，自行百度
        if(3==e.which){
            //整体的思想是这样的：
            // 在页面 创建一个 div  id="clickMenu" 属性 display:none;
            // 包含2个按钮，新建两个点击事件  关闭全部（function)，关闭其他(function)
            // <button onClick="removeOther(this)"></button>
            // <button onClick="removeAll(this)"></button>
            // 把 id="clickMenu" 的div 显示出来
            // 位置页面的最底部
            // 给这个 id="AA" 设置style
            mouseOut(e);
            //获取鼠标的位置
            //在火狐中不支持event函数，会报event没有定义的错误，所以我们初始化一下
            var event = arguments.callee.caller.arguments[0] || window.event;
            var xx = event.clientX;
            var yy = event.clientY;
            // 3个属性  绝对定位，top，left，根据鼠标所点击的位置设置
            $("#clickMenu").css({"position":"absolute","top":yy,"left":xx,"wight":"100px","hight":"100px"});
            //隐藏域传值         
            $("#hideInput").val(e.currentTarget.childNodes[0].attributes[0].nodeValue);
            //菜单显示出来
            $("#clickMenu").show();

        }
    });
}

因为我自己特殊的业务场景和框架，有iframe嵌套所以下面两个点击方法有点复杂。看看即可

function removeAll() {
     var tabContentId = $(".closeTab").parent().attr("href");
     $(".closeTab").parent().parent().remove(); //remove li of tab
     $('#my_tab a:last').tab('show'); // Select first tab
     $(tabContentId).remove(); //remove respective tab content
     $("#clickMenu").hide();
}

function removeOther() {
    var nod = $("#hideInput").val();
    var node = $(".closeTab");
    var nodes = node.parent().parent().children();
    var no = node.parent().parent().children().attr("href");
    for(var i = 0,nl = nodes.length;i<nl;i++){
        if($($(nodes)[i]).attr("href")!=nod){
            $($(nodes)[i]).parent().remove(); //remove li of tab
            $($($(nodes)[i]).attr("href")).remove(); //remove respective tab content
        } 
    }
    $("#clickMenu").hide();
    $(nod).show();
}

有问题的同仁，可私信(白天不回，你们懂的)。