JS学习-自定义右键菜单
- 主要知识点:通过注册
oncontextmenu
事件重写菜单
html+css实现简易的菜单
<html>
<head>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.box {
background-color: antiquewhite;
border: 1px solid #fae567;
width: 700px;
height: 500px;
}
/* 自定义右键菜单 */
#custom-menu {
display: none;
position: absolute;
width: 150px;
border: 1px solid #ccc;
background: #eee;
}
#mecustom-menunu ul {
margin: 5px 0;
}
ul {
padding-left: 0;
}
#custom-menu li {
height: 30px;
line-height: 30px;
color: #21232E;
font-size: 12px;
text-align: center;
cursor: default;
list-style-type: none;
border-bottom: 1px dashed #cecece;
}
#custom-menu li:hover {
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="box">
<!-- 自定义鼠标右键菜单 -->
<div id="custom-menu">
<ul>
<li onclick="menuClick(1)">清除缓存</li>
<li onclick="menuClick(2)">重新加载</li>
<li onclick="menuClick(3)">开通VIP</li>
<li onclick="menuClick(4)">赞赏作者</li>
<li onclick="menuClick(5)">喵喵喵喵</li>
</ul>
</div>
</div>
</body>
</html>
js实现自定义菜单的呼出/隐藏
-
这里实现整个body的右键菜单监听
// 自定义鼠标右键菜单栏 document.documentElement.oncontextmenu = function(e) { // 自定义body元素的鼠标事件处理函数 var e = e || window.event; // e.preventDefault(); //阻止系统右键菜单,这里测试了不会生效,只能通过return false 阻止 // 显示自定义的菜单调整位置 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0; // 获取垂直滚动条位置 let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0; // 获取水平滚动条位置 let _menu = document.querySelector('#custom-menu'); // console.log(_menu); _menu.style.display = 'block'; _menu.style.left = e.clientX + scrollLeft + 'px'; _menu.style.top = e.clientY + scrollTop + 'px'; return false; //阻止系统右键菜单 } // 鼠标点击其他位置时隐藏菜单 document.onclick = function() { let _menu = document.querySelector('#custom-menu'); // console.log(_menu); _menu.style.display = 'none'; } var menuClick = function(m) { if (m == "1") { alert("清除缓存成功") } else if (m == "2") { alert("重新加载成功") } else if (m == "3") { alert("暂未开通") } else if (m == "4") { alert("暂未开通") } else if (m == "5") { alert("暂未开通"); } }
-
如果想实现局部替换右键菜单可以通过
document.querySelector('.box').oncontextmenu = function(e) { // More Code... }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」