JavaScript实现自定义右键菜单

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

1. 屏蔽默认右键事件；

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

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

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

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

HTML：

 1 <!--Right Click Menu-->
 2 <div id="background">Click Here</div>
 3 <div class="right-menu" id="right-menu">
 4     <ul>
 5         <b>选择类型：</b>
 6     </ul>
 7     <div align="center">
 8         <a href='javascript:;' value="01">拼接视频文件</a>
 9         <a href='javascript:;' value="02">拼接图片文件</a>
10         <a href='javascript:;' value="03">拼接字幕文件</a>
11         <a href='javascript:;' value="04">流媒体文件</a>
12         <a href='javascript:;' value="05">图片文件</a>
13         <a href='javascript:;' value="06">字幕文件</a>
14         <a href='javascript:;' value="07">动画文件</a>
15         <a href='javascript:;' value="08">字体文件</a>
16         <a href='javascript:;' value="09">音视频文件</a>
17     </div>
18 </div>  

JavaScript：

 1 window.onload = function(){
 2     var forRight = document.getElementById("right-menu");
 3     document.getElementById("background").oncontextmenu = function(event){
 4         var event = event || window.event;
 5         //显示菜单
 6         forRight.style.display = "block";
 7         //菜单定位
 8         forRight.style.left = event.pageX+"px";
 9         forRight.style.top = event.pageY+"px";
10         //return false为了屏蔽默认事件
11         return false;
12     };
13     //再次点击，菜单消失
14     document.onclick=function(){
15         forRight.style.display = "none";
16     };
17 };  

CSS:

 1 #background {
 2     background-color: #4db3a2;
 3     width: 500px;
 4     height: 300px;
 5 }
 6 .right-menu {
 7     position: absolute;
 8     z-index: 99999;
 9     overflow: hidden;
10     width: 150px;
11     background-color: #FFFFFF;
12     border: dimgray 1px solid !important;
13     font-size: 14px;
14     list-style-type: none;
15     display: none;
16 }