本文最后更新于:2024年1月18日 下午

本文记录 html 自定义右键菜单的方法。

实现思路

  1. js 实现捕捉右键事件
  2. 阻止默认右键菜单显示
  3. 自定义菜单格式
  4. 显示自己的菜单

完整代码

手动实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
<title>右键菜单</title>
<style type="text/css">
#right-menu{
position: absolute;
width: 200px;
height: auto;
border: 1px #ccc solid;
display: none;
padding:2px 0;
box-shadow: 5px 5px 5px #ccc;
}
.menu-item{
height: 25px;
margin:4px 0;
padding:0 10px;
cursor: pointer;
}
.menu-item:hover{
background-color: #ccc;
}
.menu-item-separator{
border-top:1px #ccc solid;
height: 1px;
}
</style>
</head>
<body>

<!-- 自定义右键菜单dom -->
<div id="right-menu">
<div class="menu-item">执行</div>
<div class="menu-item">启动</div>
<div class="menu-item-separator"></div>
<div class="menu-item">删除</div>
<div class="menu-item">导出</div>
</div>
<script type="text/javascript">
window.oncontextmenu = function(e){
e.preventDefault(); //阻止浏览器自带的右键菜单显示
var menu = document.getElementById("right-menu");
menu.style.display = "block"; //将自定义的“右键菜单”显示出来
menu.style.left = e.clientX + "px"; //设置位置,跟随鼠标
menu.style.top = e.clientY+"px";
}
window.onclick = function(e){ //点击窗口,右键菜单隐藏
var menu = document.getElementById("right-menu");
menu.style.display = "none";
}
</script>
</body>
</html>

JQuery 库实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<link rel="stylesheet" href="/css/right_click_style.css">
<script src='https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js'></script>

<script>
(function(){var that;var arr=new Array();var html="";!function(e){e.RMenu={init:function(per){if(typeof(per)!="object"&&!per.hasOwnProperty('area')&&!per.hasOwnProperty('items')&&!per.hasOwnProperty('callback'))throw"json 数据错误";that=this;this.showmenu(per);var areaHeight=$(per.area).height();var areaWidth=$(per.area).width();var menuHeight=$('.RCM-Main').height();var menuWidth=$('.RCM-Main').width();$(per.area).bind('contextmenu',function(event){

// 检查是否按下了Ctrl键
if (event.ctrlKey) {
console.log("test");
return true;
} else {
var xPos=parseInt(event.pageX+10);var yPos=event.pageY;if(areaWidth-xPos<menuWidth){xPos=(xPos-menuWidth-20);$('.RCM-container').css({left:(xPos-menuWidth-20)+"px",top:yPos+"px"}).show();
}
}
if(areaHeight-yPos<menuHeight){yPos=(yPos-menuHeight-20);}
$('.RCM-Main').css({left:xPos+"px",top:yPos+"px"}).show();return false;})
$(per.area).on('click',function(){$('.RCM-container').hide();});$('.RCM-container li').on('click',function(){var content=$(this).data('content');$('.RCM-container').hide();per.callback({event:'click',data:content});});$('.RCM-container ul li,.RCM-child li').mouseover(function(e){if($(this).find('i').hasClass('fa-align-right')){var width=$(this).find('i').next('.RCM-child').width();$(this).find('i').next('.RCM-child').css('left',width).show();}});$('.RCM-container ul li,.RCM-child li').mouseout(function(){$('.RCM-child').hide();});},contextMenu:function(per,key){var key=key?key:"Main";html+='<div class="RCM-container RCM-'+key+'"><ul>';$.each(per.items,function(item,val){var icon=val.icon?'<i class="fa fa-'+val.icon+' fa-fw ">&nbsp;':''
var center=val.icon?'nocenter':'textcenter';var iconAfter=val.items?'<i class="fa fa-chevron-right fa-fw fa-align-right">&nbsp;':'';html+='<li data-content='+item+' class="'+center+'">'+icon+'</i>'+val.name+iconAfter+'</i>';if(val.hasOwnProperty('items')){that.contextMenu(val,'child');}
html+='</li>';});html+="</ul></div>";return html;},showmenu:function(per){var ce=this.contextMenu(per);$(per.area).append(ce);$('.RCM-container').hide();}};}(window)})();

</script>

<script>
$(document).ready(function(){
var rcm = window.RMenu;
rcm.init({
area:'body',
items:{
"edit":{name:"编辑",icon:'edit'},
"del":{name:"删除",icon:'trash-o'},
"add":{name:"添加",icon:'plus',items:{
"new-text":{name:"添加文件",icon:'file-text'},
"new-zip":{name:"添加ZIP",icon:'file-zip-o'}
}},
"refresh":{name:"刷新",icon:'refresh'},
"down":{name:"下载按钮",icon:'cloud-download'},
"new":{name:"新建",icon:'file',items:{
"new-text":{name:"新建文件",icon:'file-text'},
"new-zip":{name:"新建ZIP",icon:'file-zip-o'}
}}
},
callback:function(res){
if(res.data == 'edit'){
console.log('点击了edit');
}else if(res.data == 'del'){
console.log('点击了del');
}else if(res.data == 'add'){
console.log('点击了add');
}else if(res.data == 'refresh'){
window.location.reload();
}else if(res.data == 'down'){
console.log('点击了download');
}
}
})
});
</script>

其中 css 文件内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
@import url("https://s1.pstatp.com/cdn/expire-1-M/font-awesome/4.6.0/css/font-awesome.min.css");

body{
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
overflow: hidden;
font-family: "微软雅黑";
}

.RCM-Main{
position: absolute;
}
.RCM-container{
border: 1px solid #ccc;
padding: 5px 0px;
display: block;
box-shadow: 0px 0px 2px #ccc;
font-size: 14px;
border-radius: 3px;
z-index: 10000;
background: #fff;
color: #000;
}
.RCM-container ul{
list-style: none;
padding: 0px;
margin: 0px;
}

.RCM-container ul li{
/* width: 70px; */
height: 30px;
line-height: 30px;
/* text-align: center; */
padding:0px 18px 0px 15px;
cursor: pointer;
position: relative;
}

.RCM-container ul li:hover{
background-color: rgba(52, 58, 64, 1.0);
color: #fff;
}

.textcenter{
text-align: center;
}

.fa-align-right{
position: absolute;
right: 0px;
top: 10px;
}
.RCM-child{
position: absolute;
top: 0px;
width: 100%;
}

其中判断点击右键时是否按下了 Ctrl,如果 按下了 Ctrl 则显示正常的右键菜单。

参考资料



文章链接:
https://www.zywvvd.com/notes/coding/web/front-end/html-rightclick-replace/html-rightclick-replace/


“觉得不错的话,给点打赏吧 ୧(๑•̀⌄•́๑)૭”

微信二维码

微信支付

支付宝二维码

支付宝支付

自定义网页右键菜单
https://www.zywvvd.com/notes/coding/web/front-end/html-rightclick-replace/html-rightclick-replace/
作者
Yiwei Zhang
发布于
2024年1月17日
许可协议