logo星之书笔记

WienDesign | 左手代码,右手诗词

avatar

网名:Oliver Wien | 奥利弗·韦恩

职业:Web前端设计师、网页设计

现居地:陕西省-西安市-雁塔区

Phone:+86 182 2052 3738

Email:oliverwien@126.com

JavaScript自定义右键菜单

JS右键单击事件,在我们前端写页面时使用的并不太频繁。

JavaScript实现自定义右键菜单,设计思路如下:

1. 屏蔽默认右键事件;

2. 隐藏自定义的菜单模块;

3. 右键点击特定或非特定区域,显示菜单模块;

4. 再次点击,隐藏菜单。

老规矩先上效果图。

效果图:

840540561393edfbf3eb33f7a99ab6aa.png

HTML结构:

<div?id="btn"></div>
<div?id="right-menu">??
	<span>ID:75</span>
	<span>大小:16KB</span>
	<span>用户:admin/admin</span>
	<span>状态:可用</span>
	<span>操作:删除</span>
</div>

html代码相对比较简单,其实就两个容器。一个用来被点击,一个用于显示右键菜单。

CSS代码:

#btn {
    background-color: #4db3a2;
    width: 100px;
    height: 100px;
}
#right-menu {
    position: absolute;
    z-index: 99999;
    overflow: hidden;
    width: 150px;
    padding:5px;
    background-color: #fff;
    border: 1px solid #dfdfdf;
    display: none;
}
#right-menu span{
    display:block
}

css代码侧重点在于#right-menu中的定位以及隐藏。

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

另:这里我写的这个是针对一个事件,如果是复数的,可以利用for循环。

Comments 0