星之书笔记

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

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

1. 屏蔽默认右键事件；

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

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

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

老规矩先上效果图。

效果图：

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循环。