自定义默认的右键点击菜单

经常看见一些右键点击出现一些自定义菜单,今天自己试了一下.直接上代码,代码中有注释.(自己琢磨的,如果有错误,请提出.)
css部分

<style>
        #rightClick{
                position: absolute;
                list-style: none;
                display: none;
        }
        #rightClick li{
                margin-left: 20px;
                background-color:#A4D3EE;
                color: white;
                line-height: 20px;
                height: 20px;
                width: 90px;
                text-align: center;
        }
        #tabs{
                list-style: none;
        }
        #tabs li{
                float: left;
                margin-left: 20px;
                background-color:        #B0E0E6;
                color: white;
                line-height: 20px;
                height: 20px;
                width: 60px;
                text-align: center;
                border-radius:5px ;
        }
</style>

html部分

<!--标签-->
<ul id="tabs">
        <li id="tab1">标签1</li>
        <li id="tab2">标签2</li>
        <li id="tab3">标签3</li>
        <li id="tab4">标签4</li>
        <li id="tab5">标签5</li>
        <li id="tab6">标签6</li>
</ul>
<!--自定义菜单-->
<ul id="rightClick">
        <li id="othersClose">关闭其他</li>
        <li id="close">关闭</li>
</ul>

js部分

<script>
        window.onload=function(){
                //获取右键点击时的内容
                var rightClick = document.getElementById("rightClick");
                //获取右键点击的地点
                var tabs = document.getElementById("tabs");
                var tabsLi = document.getElementById("tabs").getElementsByTagName("li");
                var eventId;
                //右键点击事件
                tabs.oncontextmenu=function(e){
                                //事件对象兼容处理
                                var ev = e || window.event;
                                //获取x,y坐标
                                var x = ev.clientX;
                                var y = ev.clientY;
                                //事件目标兼容处理
                                var target =  ev.srcElement || ev.target;
                                 eventId = target.id ;
                                rightClick.style.top=y+"px";
                                rightClick.style.left=x+"px";
                                rightClick.style.display = "block";
                                //点击自定义菜单中的某个按钮进行的操作
                                myEvent(rightClick,"click",rightClickEvent)
                                //点击屏幕其他地方,自定义菜单消失
                                myEvent(document,"click",function(){
                                        rightClick.style.display = "none";
                                })
                                return false;
                        }
                //点击自定义菜单中的某个按钮进行的操作
                function rightClickEvent(e){
                        var ev = e || window.event;
                        var target =  ev.srcElement || ev.target;
                        //关闭其他事件处理
                        if(target.id == "othersClose"){
                                for(var i = 0;i<tabsLi.length;i++){
                                        if(tabsLi[i].id!=eventId){
                                                tabsLi[i].style.display="none";
                                        }
                                }
                        }
                        //关闭事件处理
                        else if(target.id == "close"){
                                document.getElementById(eventId).style.display="none";
                        }
                }
        }
        //事件监听兼容性考虑
        function myEvent(obj,name,fn){//obj对象,name事件名称,fn调用函数
                if(obj.attachEvent){
                        var name = "on"+name;
                        obj.attachEvent(name,fn);
                }else{
                        obj.addEventListener(name,fn,false);
                }
        }
</script>

欢迎分享本文，转载请保留出处：前端ABC » 自定义默认的右键点击菜单