JavaScript实现自定义右键菜单

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

1. 屏蔽默认右键事件；

2. 隐藏自定义的菜单模块（如div、ul等）；

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

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

明确了思路，下面给出相关代码：

HTML：

<!--Right Click Menu-->
<div id="background">Click Here</div>
<div class="right-menu" id="right-menu">
<ul>
<b>选择类型：</b>
</ul>
<div align="center">
<a href='javascript:;' value="01">拼接视频文件</a>
<a href='javascript:;' value="02">拼接图片文件</a>
<a href='javascript:;' value="03">拼接字幕文件</a>
<a href='javascript:;' value="04">流媒体文件</a>
<a href='javascript:;' value="05">图片文件</a>
<a href='javascript:;' value="06">字幕文件</a>
<a href='javascript:;' value="07">动画文件</a>
<a href='javascript:;' value="08">字体文件</a>
<a href='javascript:;' value="09">音视频文件</a>
</div>
</div>

JavaScript：

window.onload = function(){
var forRight = document.getElementById("right-menu");
document.getElementById("background").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";
};
};

CSS:

#background {
background-color: #4db3a2;
width: 500px;
height: 300px;
}
.right-menu {
position: absolute;
z-index: 99999;
overflow: hidden;
width: 150px;
background-color: #FFFFFF;
border: dimgray 1px solid !important;
font-size: 14px;
list-style-type: none;
display: none;
}