- 主要知识点:通过注册
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...
}