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 }

 

posted @ 2017-03-14 11:13  月南君  阅读(3948)  评论(0)  编辑  收藏  举报