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 }