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

原创 放诞不羁 随笔 小栗子 187阅读 2017-05-11 11:42:54 举报

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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复